小程序实现悬浮搜索框


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实现页面打印的三种方法
Mar 05 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
按给定几率进行随机抽取的js代码
Dec 28 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
javascript自然分类法算法实现代码
Oct 11 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JavaScript之排序函数_动力节点Java学院整理
Jun 30 Javascript
Angular PWA使用的Demo示例
Jan 31 Javascript
vue基础之v-bind属性、class和style用法分析
Mar 11 Javascript
jQuery 筛选器简单操作示例
Oct 02 jQuery
react-native聊天室|RN版聊天App仿微信实例|RN仿微信界面
Nov 12 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/23 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP使用Mysql事务实例解析
2014/09/08 PHP
twig模板常用语句实例小结
2016/02/04 PHP
PHP实现截取中文字符串不出现?号的解决方法
2016/12/29 PHP
老生常谈php中传统验证与thinkphp框架(必看篇)
2017/06/10 PHP
php-msf源码详解
2017/12/25 PHP
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JavaScript 版本自动生成文章摘要
2008/07/23 Javascript
Jquery树插件zTree用法入门教程
2015/02/17 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
处理JavaScript值为undefined的7个小技巧
2020/07/28 Javascript
[54:18]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第一场 1月22日
2021/03/11 DOTA
解决django前后端分离csrf验证的问题
2019/02/03 Python
对Python3中列表乘以某一个数的示例详解
2019/07/20 Python
Python全局锁中如何合理运用多线程(多进程)
2019/11/06 Python
Python figure参数及subplot子图绘制代码
2020/04/18 Python
如何使用pycharm连接Databricks的步骤详解
2020/09/23 Python
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
Steve Madden官网:美国鞋类品牌
2017/01/29 全球购物
生物化工工艺专业应届生求职信
2013/10/08 职场文书
营销与策划应届生求职信
2013/11/04 职场文书
实习生自我鉴定范文
2013/12/05 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
社团活动总结怎么写
2014/06/30 职场文书
小学红领巾广播稿(3篇)
2014/09/13 职场文书
维稳承诺书
2015/01/20 职场文书
网吧管理制度范本
2015/08/05 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js