小程序实现悬浮搜索框


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 相关文章推荐
Extjs4中的分页应用结合前后台
Dec 13 Javascript
不同编码的页面表单数据乱码问题解决方法
Feb 15 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
Mar 07 Javascript
jQuery实现的简单百分比进度条效果示例
Aug 01 Javascript
解析js如何获取css样式
Dec 11 Javascript
axios学习教程全攻略
Mar 26 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
详解写好JS条件语句的5条守则
Feb 28 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
Sep 05 Javascript
js利用拖放实现添加删除
Aug 27 Javascript
Vue深入理解插槽slot的使用
Aug 05 Vue.js
小程序实现搜索框功能
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
Re:从零开始的异世界生活 第2季 开播啦
2020/07/24 日漫
从零开始 教你如何搭建Discuz!4.1论坛
2006/07/07 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
通过继承IHttpHandle实现JS插件的组织与管理
2010/07/13 Javascript
jQuery插件 selectToSelect使用方法
2013/10/02 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
jQuery基于图层模仿五星星评价功能的方法
2015/05/07 Javascript
基于jquery实现导航菜单高亮显示(两种方法)
2015/08/23 Javascript
深入解析AngularJS框架中$scope的作用与生命周期
2016/03/05 Javascript
jQuery实现左侧导航模块的显示与隐藏效果
2016/07/04 Javascript
JavaScript字符串对象
2017/01/14 Javascript
jquery实现弹窗功能(窗口居中显示)
2017/02/27 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
你可能从未使用过的11+个JavaScript特性(小结)
2020/01/08 Javascript
python随机生成指定长度密码的方法
2015/04/04 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
详解python 发送邮件实例代码
2016/12/22 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
Python selenium抓取微博内容的示例代码
2018/05/17 Python
Python异常的检测和处理方法
2018/10/26 Python
python查询文件夹下excel的sheet名代码实例
2019/04/02 Python
Django中自定义模型管理器(Manager)及方法
2019/09/23 Python
python实现银行实战系统
2020/02/26 Python
Python任务自动化工具tox使用教程
2020/03/17 Python
Django实现celery定时任务过程解析
2020/04/21 Python
html5 canvas-2.用canvas制作一个猜字母的小游戏
2013/01/07 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
LN-CC美国:伦敦时尚生活的缩影
2019/02/19 全球购物
NYX Professional Makeup英国官网:美国平价专业彩妆品牌
2019/11/13 全球购物
高中毕业生自我鉴定范文
2013/09/26 职场文书
大学毕业自我鉴定范文
2014/02/03 职场文书
大学生活自我评价
2014/04/09 职场文书
慈善晚会策划方案
2014/05/14 职场文书
亮剑观后感
2015/06/05 职场文书
JMeter对MySQL数据库进行压力测试的实现步骤
2022/01/22 MySQL