小程序如何實現懸浮搜索框

這篇文章將為大家詳細講解有關小程序如何實現懸浮搜索框，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

小程序實現懸浮搜索框的具體代碼，具體內容如下

懸浮搜索框是當數據界面不斷滾動時，搜索框始終懸浮在最上方。來看一下效果圖

UI代碼

 <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" >清空</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;
}

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

用到的幾個圖片

關于“小程序如何實現懸浮搜索框”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。