首页 > 课堂 > 小程序 > 正文

小程序实现悬浮搜索框

2020-03-21 15:52:08
字体:
来源:转载
供稿:网友

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

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

小程序,悬浮,搜索框

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

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

用到的几个图片

小程序,悬浮,搜索框小程序,悬浮,搜索框小程序,悬浮,搜索框小程序,悬浮,搜索框

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


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表