?在圖書列表頁的頂端有一個搜索按鈕，點擊搜索以后會出現搜索面板，在這里不把這個當做一個新頁面，做成一個組件，這種業務邏輯復雜的組件就是高階組件

在book.js新增一個變量：

?searching:false

用來顯示該面板是否顯示

新建一個search組件,骨架如下

在book.json中引入組件后再book.wxml中引入組件，并給頭部搜索框綁定點擊按鈕

點擊按鈕的邏輯很簡單：

接下來還需要點擊取消隱藏，取消按鈕是在組件內部的

和之前的套路一樣，給組件取消按鈕定義一個自定義取消事件

在組件內部js中使用tiggerEvent把當前事件傳遞到父組件

父組件監聽這個onCancel事件：

最后在book.js處理傳遞過來的事件方法

接下來再底部添加歷史搜索和熱門搜索的頁面結構并寫好樣式

給搜索組件內部的搜索框綁定一個事件，監聽input獲取到的值

新增一個keywords.js，寫入一個新的模塊，這個模塊的就是處理緩存,獲取熱門是從服務器獲取的，而歷史記錄則需要自己寫一個緩存方法記錄用戶每次輸入的

在組件內部input方法使用keyword模塊的addtohistory函數

?在Strong里測試過緩存以后，綁定歷史緩存到頁面

列表渲染：

這樣就完成了歷史記錄的顯示

接著實現熱門搜索，熱門搜索需要從服務器獲取數據，所以我們擴展

KeywordModel這個類 gethot返回一個promise對象:

綁定數據

同樣的方式循環實現

效果如下

?

轉載于:https://www.cnblogs.com/rmty/p/10927235.html

總結

以上是生活随笔為你收集整理的微信小程序项目，实现图书搜索高阶组件:的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。