小程序实现悬浮搜索框


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 相关文章推荐
JavaScript库 开发规则
Jan 31 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
纯JS实现根据CSS的class选择DOM
Mar 22 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
JS防止网页被嵌入iframe框架的方法分析
Sep 13 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 Javascript
深入理解JS中Number(),parseInt(),parseFloat()三者比较
Aug 24 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
小程序点击图片实现自动播放视频
May 29 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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新手上路(四)
2006/10/09 PHP
isset和empty的区别
2007/01/15 PHP
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
php实现socket推送技术的示例
2017/12/20 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
jQuery技巧大放送 学习jquery的朋友可以看下
2009/10/14 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
2013/03/05 Javascript
JQuery表格内容过滤的实现方法
2013/07/05 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
深入分析jsonp协议原理
2015/09/26 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
详解jQuery UI库中文本输入自动补全功能的用法
2016/04/23 Javascript
jQuery图片轮播插件——前端开发必看
2016/05/31 Javascript
AngularJs  Creating Services详解及示例代码
2016/09/02 Javascript
原生js实现ajax方法(超简单)
2016/09/20 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
JavaScript动态创建二维数组的方法示例
2019/02/01 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
[04:22]DSPL第二期精彩集锦:残血反杀!
2014/12/10 DOTA
Python每天必学之bytes字节
2016/01/28 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python复数属性和方法运算操作示例
2017/07/21 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python 搜索大文件的实例代码
2019/07/08 Python
Tensorflow Summary用法学习笔记
2020/01/10 Python
python定义类self用法实例解析
2020/01/22 Python
GNC健安喜官方海外旗舰店:美国著名保健品牌
2017/01/04 全球购物
英国著名药妆店:Superdrug
2021/02/13 全球购物
如何清空Session
2015/02/23 面试题
铲车司机岗位职责
2014/03/15 职场文书
环保建议书500字
2014/05/14 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
领导四风问题整改措施思想汇报
2014/10/13 职场文书
庆七一晚会主持词
2015/06/30 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python