微信小程序搜索组件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 相关文章推荐
一个用js实现控制台控件的代码
Sep 04 Javascript
JavaScript 撑出页面文字换行
Jun 15 Javascript
非主流的textarea自增长实现js代码
Dec 20 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 Javascript
任意Json转成无序列表的方法示例
Dec 09 Javascript
Angular的模块化(代码分享)
Dec 26 Javascript
微信小程序技巧之show内容展示,上传文件编码问题
Jan 23 Javascript
js常用的继承--组合式继承
Mar 06 Javascript
js实现加载页面就自动触发超链接的示例
Aug 31 Javascript
深入理解Node module模块
Mar 26 Javascript
Element Dropdown下拉菜单的使用方法
Jul 26 Javascript
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中使用正则表达式进行查找替换
2013/06/13 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
Code:loadScript( )加载js的功能函数
2007/02/02 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
JS解析XML文件和XML字符串详解
2015/04/17 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
深入分析javascript中的错误处理机制
2016/07/17 Javascript
AngularJS开发教程之控制器之间的通信方法分析
2016/12/25 Javascript
深入研究jQuery图片懒加载 lazyload.js使用方法
2017/08/16 jQuery
详解A标签中href=&quot;&quot;的几种用法
2017/08/20 Javascript
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
详解Vue源码学习之callHook钩子函数
2018/07/25 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
Python库urllib与urllib2主要区别分析
2014/07/13 Python
Python的垃圾回收机制深入分析
2014/07/16 Python
使用Python编写类UNIX系统的命令行工具的教程
2015/04/15 Python
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python实现将读入的多维list转为一维list的方法
2018/06/28 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
PyQt5显示GIF图片的方法
2019/06/17 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
北京华建集团SQL面试题
2014/06/03 面试题
团支书的期末学习总结自我评价
2013/11/01 职场文书
医药代表个人求职信范本
2013/12/19 职场文书
论文诚信承诺书
2014/05/23 职场文书
今冬明春火灾防控工作方案
2014/05/29 职场文书
会计系毕业求职信
2014/08/07 职场文书
学校党的群众路线教育实践活动对照检查材料
2014/09/24 职场文书
打架检讨书
2015/01/27 职场文书
2015年党风廉政建设责任书
2015/01/29 职场文书
运动会1000米加油稿
2015/07/21 职场文书
《抽屉原理》教学反思
2016/02/20 职场文书
Python+Selenium实现读取网易邮箱验证码
2022/03/13 Python
Elasticsearch 批量操作
2022/04/19 Python
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS