小程序开发系列(五)悬浮搜索框

来源：互联网发布：mac删除下载的软件编辑：程序博客网时间：2024/05/22 13:33

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

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

用到的几个图片

转载请注明出处

0 0