小程序实现悬浮搜索框

微信(小程序)  /  管理员 发布于 3年前   360

本文实例为大家分享了小程序实现悬浮搜索框的具体代码，供大家参考，具体内容如下

悬浮搜索框是当数据界面不断滚动时，搜索框始终悬浮在最上方。来看一下效果图

UI代码

样式

.search-wrapper { position: fixed;/*悬停搜索框的关键样式*/ top: 0px; left: 0; width: 100%; z-index: 999;} .search-panel { background-color: #f50;} .search-section { padding: 5px 0px; display: flex; flex-direction: row;} .search-demo { padding: 5px; flex-direction: row; background-color: #eee; padding-left:42px;   align-items: flex-start;} .search-input-wrapper { flex: 8; padding: 5px; background-color: #eee; border-radius: 3px;} .search-input { padding-top: 5px;} .search-clear { float: right; width: 32px; height: 32px; z-index: 998;} .search-button-wrapper { padding-left: 5px; padding-right: 5px; padding-top:5px; } .search-button { flex: 1; border: none !important; color: white !important; width: 32px; height: 32px;}

JS代码

//获取应用实例var app = getApp()Page({  data: {    barcode: "",    hiddenLoading: true,    hiddenData: true,    hiddenDropdown: true,    hiddenClear:true,    demoData: 'XXXX',    Product: {},  },  bindBarcodeInput: function (e) {    this.setData({      barcode: e.detail.value    })  },  bindBarcodeFocus: function (e) {    this.setData({      hiddenDropdown: false,      hiddenClear:false    })  },  bindBarcodeBlur: function (e) {    this.setData({      hiddenDropdown: true,      hiddenClear:true    })  },  scan: function (e) {    var that = this;    wx.scanCode({      success: function (res) {        that.setData({          barcode: res.result        });        that.query(e);      },      fail: function () {        that.setData({          barcode: "",          hiddenData: true        });      },      complete: function () {        // complete      }    })  },  setDemoData: function (e) {    this.setData({      barcode: this.data.demoData    });  },  clear: function (e) {    this.setData({      barcode: "",      hiddenData: true    });  },  query: function (e) {    var url = "https://www.xxx.com/query";//查询数据的URL    var that = this;    if (that.data.barcode == undefined      || that.data.barcode == null      || that.data.barcode.length <= 0) {      that.setData({ hiddenData: true });      wx.showToast({        title: '请输入条码',        image: '/images/fail.png',        duration: 2000      });      return;    }    wx.request({      url: url,      data: { barcode: that.data.barcode },      method: 'GET',      success: function (res) {        var result = res.data;        if (result.Status != 0) {          that.setData({ hiddenData: true });          wx.showToast({            title: result.Message,            image: '/images/fail.png',            duration: 2000          })          return;        }        that.setData({ Product: result.Data, hiddenData: false });        wx.showToast({          title: "获取数据成功",          image: '/images/ok.png',          duration: 2000        })      },      fail: function (e) {        var toastText = '获取数据失败' + JSON.stringify(e);        that.setData({          hiddenLoading: !that.data.hiddenLoading,          hiddenData: true        });        wx.showToast({          title: toastText,          icon: '',          duration: 2000        })      },      complete: function () {        // complete      }    })  }})

用到的几个图片

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• 小程序实现搜索框功能
• 小程序实现搜索框