<view class="search-wrapper">  <view class="search-panel">   <view class="search-section">    <view class="search-button-wrapper">     <image class="search-button" src="/images/scan.png" bindtap="scan"></image>    </view>    <view class="search-input-wrapper ">     <input bindinput="bindBarcodeInput" bindconfirm="query" bindfocus="bindBarcodeFocus" bindblur="bindBarcodeBlur" class="search-input" placeholder="掃描或者手動輸入條碼" value="{{barcode}}" confirm-type="search" />    </view>    <view class="search-button-wrapper">     <image class="search-button" src="/images/search.png" bindtap="query"></image>    </view>   </view>  </view>  <view class="search-demo" hidden="{{hiddenDropdown}}">   <button size="mini" bindtap="setDemoData">示例</button>   <button size="mini" bindtap="clear" style="margin-left:10px;">清空</button>  </view> </view>

.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;}

//獲取應用實例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      }    })  }})