微信小程序搜索組件wxSearch實(shí)例詳解

更新時(shí)間：2017年06月08日 11:21:21 投稿：lqh

這篇文章主要介紹了微信小程序搜索組件wxSearch實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下

wxSearch優(yōu)雅的微信小程序搜索框

一、功能

支持自定義熱門key
支持搜索歷史
支持搜索建議
支持搜索歷史(記錄)緩存

二、使用

1、將wxSearch文件夾整個(gè)拷貝到根目錄下
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文件，請(qǐng)?jiān)赼pp.wxss文件中引入。

wxSearch

3.1.3 自定義搜索框如果上面兩種搜索樣式都不喜歡，你也可以自己定義，只需要保證事件的觸發(fā)即可。

// 搜索輸入框需要保證下面三個(gè)事件的書寫正確 
<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鏁堟灉鍥? title=

三、源碼解讀

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ù)組 熱門搜索的顯示內(nèi)容
isShowKey 是否顯示熱門搜索 默認(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:[],//自定義熱門搜索，傳入的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ù)不再贅述，可能會(huì)有一些bug，可以根據(jù)情況自己進(jìn)行修改。

感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

您可能感興趣的文章: