小程序实现悬浮搜索框

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

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

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
      }
    })
  }
})

用到的几个图片

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