wxSearch優(yōu)雅的微信小程序搜索框
創(chuàng)新互聯(lián)是一家成都網(wǎng)站設(shè)計、做網(wǎng)站，提供網(wǎng)頁設(shè)計，網(wǎng)站設(shè)計，網(wǎng)站制作，建網(wǎng)站，按需網(wǎng)站制作，網(wǎng)站開發(fā)公司，于2013年創(chuàng)立是互聯(lián)行業(yè)建設(shè)者，服務者。以提升客戶品牌價值為核心業(yè)務，全程參與項目的網(wǎng)站策劃設(shè)計制作，前端開發(fā)，后臺程序制作以及后期項目運營并提出專業(yè)建議和思路。
一、功能
支持自定義熱門key
支持搜索歷史
支持搜索建議
支持搜索歷史(記錄)緩存
二、使用
1、將wxSearch文件夾整個拷貝到根目錄下
2、引入
// wxml中引入模板// wxss中引入 @import "/wxSearch/wxSearch.wxss";
3、使用3.1 wxml文件這里有兩種模板：一種為wxSearch作者提供的模板，另一種是weui提供的模板。
3.1.1 第一種模板
// wxSearch作者提供的模板
3.1.2 第二種模板
注意：此模板需要使用weui.wxss文件，請在app.wxss文件中引入。
3.1.3 自定義搜索框如果上面兩種搜索樣式都不喜歡，你也可以自己定義，只需要保證事件的觸發(fā)即可。
// 搜索輸入框需要保證下面三個事件的書寫正確 // 搜索按鈕的事件
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
參數(shù):that var that = this后傳入即可
barHeight 搜索框高度 根據(jù)你設(shè)定的搜索框高度進行設(shè)定
keys 數(shù)組 熱門搜索的顯示內(nèi)容
isShowKey 是否顯示熱門搜索 默認顯示(false即可不顯示)
isShowHis 是否顯示歷史搜索 默認顯示(false即可不顯示)
callBack 回調(diào)函數(shù)
源碼做了什么
初始化了wxSearchData的內(nèi)容
wxSearchData:{
view:{
isShow: false, //是否顯示搜索界面，默認隱藏，當輸入框獲取焦點時顯示
searchbarHeght: 20, //根據(jù)手機屏幕高度和傳入的barHeight進行計算
isShowSearchKey: true, //默認為true
isShowSearchHistory: true, //默認為true }
keys:[],//自定義熱門搜索，傳入的keys
his:[],//歷史搜索關(guān)鍵字，從緩存中獲取
value: '' // 搜索內(nèi)容 }
wxSearch.init(that, barHeight, keys, isShowKey, isShowHis, callBack)；
initMindKeys 初始化mindKeys
// mindKeys即為所要檢索內(nèi)容的集合 var mindKeys = ['weappdev.com','微信小程序開發(fā)','微信開發(fā)','微信小程序']; WxSearch.initMindKeys(mindKeys);
其他事件函數(shù)不再贅述，可能會有一些bug，可以根據(jù)情況自己進行修改。
感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
