微信小程序搜索組件wxSearch實(shí)例詳解
wxSearch優(yōu)雅的微信小程序搜索框
一、功能
支持自定義熱門(mén)key
支持搜索歷史
支持搜索建議
支持搜索歷史(記錄)緩存
二、使用
1、將wxSearch文件夾整個(gè)拷貝到根目錄下
2、引入
// wxml中引入模板
<import src="/wxSearch/wxSearch.wxml"/>
<template is="wxSearch" data="{{wxSearchData}}"/>
// wxss中引入 @import "/wxSearch/wxSearch.wxss";

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文件,請(qǐng)?jiān)赼pp.wxss文件中引入。

3.1.3 自定義搜索框如果上面兩種搜索樣式都不喜歡,你也可以自己定義,只需要保證事件的觸發(fā)即可。
// 搜索輸入框需要保證下面三個(gè)事件的書(shū)寫(xiě)正確 <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 效果圖

三、源碼解讀
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è)定的搜索框高度進(jìn)行設(shè)定
keys 數(shù)組 熱門(mén)搜索的顯示內(nèi)容
isShowKey 是否顯示熱門(mén)搜索 默認(rèn)顯示(false即可不顯示)
isShowHis 是否顯示歷史搜索 默認(rèn)顯示(false即可不顯示)
callBack 回調(diào)函數(shù)
源碼做了什么
初始化了wxSearchData的內(nèi)容
wxSearchData:{
view:{
isShow: false, //是否顯示搜索界面,默認(rèn)隱藏,當(dāng)輸入框獲取焦點(diǎn)時(shí)顯示
searchbarHeght: 20, //根據(jù)手機(jī)屏幕高度和傳入的barHeight進(jìn)行計(jì)算
isShowSearchKey: true, //默認(rèn)為true
isShowSearchHistory: true, //默認(rèn)為true }
keys:[],//自定義熱門(mén)搜索,傳入的keys
his:[],//歷史搜索關(guān)鍵字,從緩存中獲取
value: '' // 搜索內(nèi)容 }
wxSearch.init(that, barHeight, keys, isShowKey, isShowHis, callBack);
initMindKeys 初始化mindKeys
// mindKeys即為所要檢索內(nèi)容的集合 var mindKeys = ['weappdev.com','微信小程序開(kāi)發(fā)','微信開(kāi)發(fā)','微信小程序']; WxSearch.initMindKeys(mindKeys);
其他事件函數(shù)不再贅述,可能會(huì)有一些bug,可以根據(jù)情況自己進(jìn)行修改。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- 微信小程序?qū)崿F(xiàn)搜索功能
- 微信小程序首頁(yè)的分類(lèi)功能和搜索功能的實(shí)現(xiàn)思路及代碼詳解
- 微信小程序下拉框搜索功能的實(shí)現(xiàn)方法
- 微信小程序?qū)崿F(xiàn)搜索功能并跳轉(zhuǎn)搜索結(jié)果頁(yè)面
- 微信小程序搜索框樣式并實(shí)現(xiàn)跳轉(zhuǎn)到搜索頁(yè)面(小程序搜索功能)
- 微信小程序?qū)崿F(xiàn)全局搜索代碼高亮的示例
- 微信小程序?qū)崿F(xiàn)搜索歷史功能
- 微信小程序 搜索框組件代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)搜索框功能
- 微信小程序?qū)崿F(xiàn)簡(jiǎn)單搜索功能
相關(guān)文章
微信小程序 小程序制作及動(dòng)畫(huà)(animation樣式)詳解
這篇文章主要介紹了微信小程序 小程序制作及動(dòng)畫(huà)詳解的相關(guān)資料,這里對(duì)小程序制作進(jìn)行了詳解,介紹動(dòng)畫(huà)部分的知識(shí),需要的朋友可以參考下2017-01-01
詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能
這篇文章主要介紹了詳解HTML5 使用video標(biāo)簽實(shí)現(xiàn)選擇攝像頭功能的相關(guān)資料,希望通過(guò)本文能幫助到大家,實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-10-10
微信小程序之網(wǎng)絡(luò)請(qǐng)求簡(jiǎn)單封裝實(shí)例詳解
這篇文章主要介紹了微信小程序之網(wǎng)絡(luò)請(qǐng)求簡(jiǎn)單封裝實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
微信小程序組件 contact-button(客服會(huì)話(huà)按鈕)詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序組件 contact-button(客服會(huì)話(huà)按鈕)詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-01-01
輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例
這篇文章主要為大家介紹了輸入框跟隨文字內(nèi)容適配寬實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08

