时间:2021-05-18
本文实例为大家分享了小程序实现悬浮搜索框的具体代码,供大家参考,具体内容如下
悬浮搜索框是当数据界面不断滚动时,搜索框始终悬浮在最上方。来看一下效果图
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://plete } }) }})用到的几个图片
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了C#实现主窗体最小化后出现悬浮框及双击悬浮框恢复原窗体的方法。分享给大家供大家参考。具体如下:这里演示C#实现主窗体最小化后出现悬浮框,双击悬浮框
本文实例为大家分享了小程序实现搜索框功能的具体代码,供大家参考,具体内容如下实现效果图:xxx.wxml搜索取消xxx.wxss.weui-search-bar
微信小程序弹框和模态框实现代码实现效果图:实现代码:.wxapp-modal{width:100%;height:100%;position:fi
微信小程序input输入框控件今天主要详写一下微信小程序中的Input输入框控件,输入框在程序中是最常见的,登录,注册,获取搜索框中的内容等等都需要,同时,还需
在制作商城类微信小程序的过程中,我们经常会碰到需要增加可拖动悬浮图标的情况,本文简单的介绍一下可拖动悬浮按钮的实现。运行截图:主要代码:js:varstartP