分享一款擁有歷史搜索記錄的微信小程序搜索框--wx-search-have-history

 最近突發奇想，想把之前自己寫的一款擁有歷史搜索記錄的微信小程序搜索框發布到npm上，今天已經完成了wx-search-have-history@0.0.1。這是我第一次嘗試，如有不當或需改進之處，請君指出，感謝萬分！！！

一：使用效果

1、通過輸入進行搜索

2、清除單個（全部）歷史搜索記錄

3、點擊歷史搜索記錄進行搜索

PS：若想要獲得上圖中的效果，可參考 test/demo 中的例子實現。

二：使用方法

1、安裝 wx-search-have-history

npm install --save wx-search-have-history

2、在需要使用 wx-search-have-history 的頁面 page.json 中添加 wx-search-have-history 自定義組件配置

{
  "usingComponents": {
    "searchHaveHistory": "wx-search-have-history"
  }
}

3、WXML 文件中引用 wx-search-have-history：調用history組件的同時，需要在調用wx-search-have-history的頁面page.js綁定事件接收搜索值（bind:searchEvent="searchEvent"），且須在searchEvent函數里調用wx.hideLoding()，可參考 test/demo/pages/index/index.js中的例子。

<searchHaveHistory id="history"
    bind:searchEvent="searchEvent">
</searchHaveHistory>

wx-search-have-history的屬性介紹如下：

屬性名	類型	默認值	是否必須	說明
id	String	無	是	組件的id，必填且唯一
maxSize	Number	8	否	歷史搜索記錄列表的最大顯示條數
placeholderText	String	請輸入關鍵字	否	輸入框的placeholder值

 

三：注意事項

1、在調用組件的時候，id必須填寫且唯一。因為此id作為本地緩存的key值。

2、在調用wx-search-have-history的頁面page.js需綁定事件接收搜索值（bind:searchEvent="searchEvent"），且須在searchEvent函數里調用wx.hideLoding(),可參考 test/demo/pages/index/index.js 中的例子。

 

項目地址：GitHub傳送門 

歡迎大家提出意見，謝謝！！！