小程序实现悬浮搜索框


Posted in Javascript onJuly 12, 2019

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

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

小程序实现悬浮搜索框

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

用到的几个图片

小程序实现悬浮搜索框小程序实现悬浮搜索框小程序实现悬浮搜索框小程序实现悬浮搜索框

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
jQuery实现的一个自定义Placeholder属性插件
Aug 11 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
Aug 15 Javascript
js实现div拖动动画运行轨迹效果代码分享
Aug 27 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
Angular6 Filter实现页面搜索的示例代码
Dec 02 Javascript
JS闭包经典实例详解
Dec 20 Javascript
JavaScript实现图片放大镜效果
Jun 27 Javascript
详解使用WebPack搭建React开发环境
Aug 06 Javascript
JavaScript 中判断变量是否为数字的示例代码
Oct 22 Javascript
小程序实现搜索框功能
Mar 26 #Javascript
iview的table组件自带的过滤器实现
Jul 12 #Javascript
es6中比较有用的7个技巧小结
Jul 12 #Javascript
echarts大屏字体自适应的方法步骤
Jul 12 #Javascript
javascript实现简易聊天室
Jul 12 #Javascript
简单了解vue中父子组件如何相互传递值(基础向)
Jul 12 #Javascript
小程序实现短信登录倒计时
Jul 12 #Javascript
You might like
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
FleaPHP框架数据库查询条件($conditions)写法总结
2016/03/19 PHP
PHP中key和current,next的联合运用实例分析
2016/03/29 PHP
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
深入分析jquery解析json数据
2014/12/09 Javascript
jQuery中removeAttr()方法用法实例
2015/01/05 Javascript
JavaScript实现打字效果的方法
2015/07/10 Javascript
基于Jquery插件实现跨域异步上传文件功能
2016/04/26 Javascript
angularjs的select使用及默认选中设置
2017/04/08 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
vue使用高德地图根据坐标定位点的实现代码
2019/08/22 Javascript
Postman无法正常返回结果问题解决
2020/08/28 Javascript
[01:55]2014DOTA2国际邀请赛快报:国土生病 紧急去医院治疗
2014/07/10 DOTA
Python自动化运维之IP地址处理模块详解
2017/12/10 Python
Python实现pdf文档转txt的方法示例
2018/01/19 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
elasticsearch python 查询的两种方法
2019/08/04 Python
Python openpyxl读取单元格字体颜色过程解析
2019/09/03 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
基于python实现MQTT发布订阅过程原理解析
2020/07/27 Python
Python 捕获代码中所有异常的方法
2020/08/03 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
C#里面可以避免一个类被其他类继承么?如何?
2013/09/26 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
班风学风建设方案
2014/05/06 职场文书
医药销售自我评价200字
2014/09/11 职场文书
农村党员干部承诺书
2015/05/04 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
解决vue中provide inject的响应式监听
2022/04/19 Vue.js
使用Django框架创建项目
2022/06/10 Python