微信小程序搜索组件wxSearch实例详解


Posted in Javascript onJune 08, 2017

wxSearch优雅的微信小程序搜索框

一、功能

支持自定义热门key
支持搜索历史
支持搜索建议
支持搜索历史(记录)缓存

二、使用

1、将wxSearch文件夹整个拷贝到根目录下
2、引入

// wxml中引入模板 
<import src="/wxSearch/wxSearch.wxml"/> 
<template is="wxSearch" data="{{wxSearchData}}"/> 
// wxss中引入 @import "/wxSearch/wxSearch.wxss";

微信小程序搜索组件wxSearch实例详解

3、使用3.1 wxml文件这里有两种模板:一种为wxSearch作者提供的模板,另一种是weui提供的模板。

3.1.1 第一种模板

// wxSearch作者提供的模板 
<import src="/wxSearch/wxSearch.wxml"/> 
<view class="wxSearch-section">  
<view class="wxSearch-pancel">    
<input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" class="wxSearch-input" placeholder="搜索" />    
<button class="wxSearch-button" bindtap="wxSearchFn" size="mini" plain="true">搜索</button>  
</view> 
</view> 
<template is="wxSearch" data="{{wxSearchData}}"/>

3.1.2 第二种模板

<import src="../../wxSearch/wxSearch.wxml" /> 
<view class="weui-search-bar"> 
 <view class="weui-search-bar__form">   
 <view class="weui-search-bar__box">     
  <icon class="weui-icon-search_in-box" type="search" size="14"></icon>     
  <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{wxSearchData.value}}"         bindfocus="wxSerchFocus" bindinput="wxSearchInput" bindblur="wxSearchBlur" />     
  <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">       
  <icon type="clear" size="14"></icon>     
  </view>   
 </view> 
 </view> 
</view> 
<template is="wxSearch" data="{{wxSearchData}}" />

注意:此模板需要使用weui.wxss文件,请在app.wxss文件中引入。

微信小程序搜索组件wxSearch实例详解

3.1.3 自定义搜索框如果上面两种搜索样式都不喜欢,你也可以自己定义,只需要保证事件的触发即可。

// 搜索输入框需要保证下面三个事件的书写正确 
<input bindfocus="wxSerchFocus" bindinput="wxSearchInput" bindblur="wxSearchBlur" /> 
// 搜索按钮的事件 <button bindtap="wxSearchFn"/>

3.2 js文件

wxSearchFn: function(e){
  var that = this
  WxSearch.wxSearchAddHisKey(that);
 },
 wxSearchInput: function(e){
  var that = this
  WxSearch.wxSearchInput(e,that);
 },
 wxSerchFocus: function(e){
  var that = this
  WxSearch.wxSearchFocus(e,that);
 },
 wxSearchBlur: function(e){
  var that = this
  WxSearch.wxSearchBlur(e,that);
 },
 wxSearchKeyTap:function(e){
  var that = this
  WxSearch.wxSearchKeyTap(e,that);
 },
 wxSearchDeleteKey: function(e){
  var that = this
  WxSearch.wxSearchDeleteKey(e,that);
 },
 wxSearchDeleteAll: function(e){
  var that = this;
  WxSearch.wxSearchDeleteAll(that);
 },
 wxSearchTap: function(e){
  var that = this
  WxSearch.wxSearchHiddenPancel(that);
 }

3.3 效果图

微信小程序搜索组件wxSearch实例详解

三、源码解读

module.exports = {
  init: init,
  initColor: initColors,
  initMindKeys: initMindKeys,
  wxSearchInput: wxSearchInput,
  wxSearchFocus: wxSearchFocus,
  wxSearchBlur: wxSearchBlur,
  wxSearchKeyTap: wxSearchKeyTap,
  wxSearchAddHisKey:wxSearchAddHisKey,
  wxSearchDeleteKey:wxSearchDeleteKey,
  wxSearchDeleteAll:wxSearchDeleteAll,
  wxSearchHiddenPancel:wxSearchHiddenPancel
}
init 初始化wxSearch

参数:that var that = this后传入即可
barHeight 搜索框高度 根据你设定的搜索框高度进行设定
keys 数组 热门搜索的显示内容
isShowKey 是否显示热门搜索 默认显示(false即可不显示)
isShowHis 是否显示历史搜索 默认显示(false即可不显示)
callBack 回调函数
源码做了什么 
初始化了wxSearchData的内容

wxSearchData:{    
 view:{       
  isShow: false, //是否显示搜索界面,默认隐藏,当输入框获取焦点时显示
  searchbarHeght: 20, //根据手机屏幕高度和传入的barHeight进行计算
  isShowSearchKey: true, //默认为true    
  isShowSearchHistory: true, //默认为true    }    
  keys:[],//自定义热门搜索,传入的keys    
  his:[],//历史搜索关键字,从缓存中获取    
  value: '' // 搜索内容   } 
wxSearch.init(that, barHeight, keys, isShowKey, isShowHis, callBack);
initMindKeys 初始化mindKeys 
// mindKeys即为所要检索内容的集合 var mindKeys = ['weappdev.com','微信小程序开发','微信开发','微信小程序']; WxSearch.initMindKeys(mindKeys);

其他事件函数不再赘述,可能会有一些bug,可以根据情况自己进行修改。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript 类定义的4种方法
Sep 12 Javascript
jQuery Dialog 弹出层对话框插件
Aug 09 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
Feb 03 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
jQuery源码解读之addClass()方法分析
Feb 20 Javascript
关于Node.js的events.EventEmitter用法介绍
Apr 01 Javascript
基于JavaScript实现评论框展开和隐藏功能
Aug 25 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
JavaScript如何对图片进行黑白化
Apr 10 Javascript
vue的keep-alive中使用EventBus的方法
Apr 23 Javascript
Vue如何实现组件间通信
May 15 Vue.js
JS去掉字符串前后空格、阻止表单提交的实现代码
Jun 08 #Javascript
angular实现图片懒加载实例代码
Jun 08 #Javascript
微信小程序日历组件calendar详解及实例
Jun 08 #Javascript
php简单数据库操作类的封装
Jun 08 #Javascript
ReactJs设置css样式的方法
Jun 08 #Javascript
requirejs按需加载angularjs文件实例
Jun 08 #Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 #Javascript
You might like
亲密接触PHP之PHP语法学习笔记1
2006/12/17 PHP
php实例分享之html转为rtf格式
2014/06/02 PHP
跟我学Laravel之快速入门
2014/10/15 PHP
PHP答题类应用接口实例
2015/02/09 PHP
PHP中十六进制颜色与RGB颜色值互转的方法
2019/03/18 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
让iframe自适应高度(支持XHTML,支持FF)
2007/07/24 Javascript
jQuery中RadioButtonList的功能及用法实例介绍
2013/08/23 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
详解JavaScript中的构造器Constructor模式
2016/01/14 Javascript
BootStrap selectpicker
2016/06/20 Javascript
[原创]JS基于FileSaver.js插件实现文件保存功能示例
2016/12/08 Javascript
JS实现选定指定HTML元素对象中指定文本内容功能示例
2017/02/13 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
jQuery访问json文件中数据的方法示例
2019/01/28 jQuery
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
JavaScript中的连续赋值问题实例分析
2019/07/12 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
2020/12/30 jQuery
[02:48]DOTA2英雄基础教程 暗夜魔王
2013/12/12 DOTA
Python中的高级数据结构详解
2015/03/27 Python
用十张图详解TensorFlow数据读取机制(附代码)
2018/02/06 Python
Python爬虫headers处理及网络超时问题解决方案
2020/06/19 Python
前端H5 Video常见使用场景简介
2020/08/21 HTML / CSS
GLAMGLOW香港官网:明星出镜前的秘密武器
2017/03/16 全球购物
捷克浴室和厨房设备购物网站:SIKO
2018/08/11 全球购物
村官工作鉴定评语
2014/01/27 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
团日活动总结范文
2014/04/25 职场文书
解除财产保全担保书
2014/05/20 职场文书
法制宣传标语集锦
2014/06/25 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python