小程序实现悬浮搜索框


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 相关文章推荐
异步加载script的代码
Jan 12 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
Sep 30 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
深入理解JavaScript系列(25):设计模式之单例模式详解
Mar 03 Javascript
Javascript字符串拼接小技巧(推荐)
Jun 02 Javascript
js微信支付实现代码
Dec 22 Javascript
vue cli webpack中使用sass的方法
Feb 24 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
Vue组件之单向数据流的解决方法
Nov 10 Javascript
layui form.render('select', 'test2') 更新渲染的方法
Sep 27 Javascript
javascript设计模式之迭代器模式
Jan 30 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 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
咖啡的种类和口感
2021/03/03 新手入门
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
php实现的验证码文件类实例
2015/06/18 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
javascript的函数
2007/01/31 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
jquery isType() 类型判断代码
2011/02/14 Javascript
JavaScript中的Truthy和Falsy介绍
2015/01/01 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
浅谈JavaScript 浏览器对象
2016/06/03 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
12306 刷票脚本及稳固刷票脚本(防挂)
2017/01/04 Javascript
JavaScript中三个等号和两个等号你了解多少
2017/07/04 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
Vue.directive()的用法和实例详解
2018/03/04 Javascript
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
2020/10/29 Javascript
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
python奇偶行分开存储实现代码
2018/03/19 Python
python实现生成Word、docx文件的方法分析
2019/08/30 Python
python模拟实现分发扑克牌
2020/04/22 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
Django中和时区相关的安全问题详解
2020/10/12 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
HTML5 source标签:媒介元素定义媒介资源
2018/01/29 HTML / CSS
如何打开WebSphere远程debug
2014/10/10 面试题
J2EE系统只能是基于web
2015/09/08 面试题
写求职信有什么意义
2014/02/17 职场文书
农业局学习党的群众路线教育实践活动心得体会
2014/03/07 职场文书
阳光体育活动总结
2014/04/30 职场文书
工作检讨书怎么写
2014/10/10 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
自愿离婚协议书范本2016
2016/03/18 职场文书
Python 数据科学 Matplotlib图库详解
2021/07/07 Python
iOS 16进一步确认,一共支持16款iPhone
2022/04/28 数码科技