微信小程序搜索组件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 相关文章推荐
firefox和IE系列的相关区别整理 以备后用
Dec 28 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
全面兼容的javascript时间格式化函数(比较实用)
May 14 Javascript
javascript进行数组追加方法小结
Jun 16 Javascript
FF(火狐)浏览器无法执行window.close()解决方案
Nov 13 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
vue-cli脚手架打包静态资源请求出错的原因与解决
Jun 06 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
Koa从零搭建到Api实现项目的搭建方法
Jul 30 Javascript
node.js使用stream模块实现自定义流示例
Feb 13 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.ini实现Mysql导入数据库文件最大限制的修改方法
2007/12/11 PHP
windows环境下php配置memcache的具体操作步骤
2013/06/09 PHP
php 批量添加多行文本框textarea一行一个
2014/06/03 PHP
PHP多线程编程之管道通信实例分析
2015/03/07 PHP
PHP实现通用alert函数的方法
2015/03/11 PHP
PHP实现路由映射到指定控制器
2016/08/13 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
PHP后台备份MySQL数据库的源码实例
2019/03/18 PHP
Js中sort()方法的用法
2006/11/04 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
javascript的内存管理详解
2013/08/07 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
jQuery实现的输入框选择时间插件用法实例
2015/02/28 Javascript
深入浅析NodeJs并发异步的回调处理
2015/12/21 NodeJs
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
javascript实现下雨效果
2017/03/27 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
Vue2仿淘宝实现省市区三级联动
2020/04/15 Javascript
jquery手机触屏滑动拼音字母城市选择器的实例代码
2017/12/11 jQuery
js异步上传多张图片插件的使用方法
2018/10/22 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
原生js实现文件上传、下载、封装等实例方法
2020/01/05 Javascript
[01:56]2014DOTA2西雅图邀请赛 MVP外卡赛老队长精辟点评
2014/07/09 DOTA
python爬取网站数据保存使用的方法
2013/11/20 Python
zbar解码二维码和条形码示例
2014/02/07 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
波兰运动鞋网上商店:e-Sporting
2018/02/16 全球购物
美国儿童服装、家具和玩具精品店:Maisonette
2019/11/24 全球购物
日语专业个人求职信范文
2014/02/02 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
关于环保的宣传稿
2015/07/23 职场文书
pytorch 两个GPU同时训练的解决方案
2021/06/01 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python