小程序实现悬浮搜索框


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 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
JSON 数据格式介绍
Jan 13 Javascript
jQuery中document与window以及load与ready 区别详解
Dec 29 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
Bootstrap每天必学之按钮(Button)插件
Apr 25 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
Mar 21 Javascript
JS库之wow.js使用方法
Sep 14 Javascript
jQuery基于随机数解决中午吃什么去哪吃问题示例
Dec 29 jQuery
js实现计算器功能
Aug 10 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
JavaScript 去重和重复次数统计
Mar 31 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迭代器的内部执行过程详解
2013/11/12 PHP
php一维二维数组键排序方法实例总结
2014/11/13 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
SWFObject Flash js调用类
2008/07/08 Javascript
jquery 全局AJAX事件使用代码
2010/11/05 Javascript
ie下jquery.getJSON的缓存问题的处理方法
2013/03/29 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
2013/06/24 Javascript
图片上传判断及预览脚本的效果实例
2013/08/07 Javascript
删除javascript中注释语句的正则表达式
2014/06/11 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
Node.js中的缓冲与流模块详细介绍
2015/02/11 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
2015/03/31 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
JavaScript实现文本框中默认显示背景图片在获得焦点后消失的方法
2015/07/01 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
JS实现复制功能
2017/03/01 Javascript
浅谈angular表单提交中ng-submit的默认使用方法
2018/09/30 Javascript
ES6 fetch函数与后台交互实现
2018/11/14 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
python使用7z解压apk包的方法
2015/04/18 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
对Python w和w+权限的区别详解
2019/01/23 Python
利用Python脚本批量生成SQL语句
2020/03/04 Python
python 实现简易的记事本
2020/11/30 Python
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
服装设计专业自荐书范文
2013/12/30 职场文书
预备党员政审材料
2014/02/04 职场文书
挂牌仪式主持词
2014/03/20 职场文书
小学生学雷锋演讲稿
2014/04/25 职场文书
竞选大队长演讲稿
2014/04/29 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python