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

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

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

一、功能

支持自定义热门key

支持搜索历史

支持搜索建议

支持搜索历史(记录)缓存

二、使用

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

2、引入

// wxml中引入模板

// wxss中引入 @import "/wxSearch/wxSearch.wxss";

3.1.1 第一种模板

搜索

3.1.2 第二种模板

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

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

// 搜索输入框需要保证下面三个事件的书写正确

// 搜索按钮的事件

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 效果图

三、源码解读

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即可不显示)

FczvQvxisShowHis 是否显示历史搜索 默认显示(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，可以根据情况自己进行修改。

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。