全棧項目|小書架|微信小程序-實現搜索功能

效果圖

上圖是小程序端實現的搜索功能效果圖。 從圖中能夠看出點擊首頁搜索按鈕便可進入搜索頁面。

佈局樣式是：搜索框 + 熱搜內容 + 搜索列表。

• 搜索框使用 lin-ui 中的 Searchbar組件。
• 熱搜內容的單個按鈕使用 lin-ui 中的 Tag組件，而實現雲標籤樣式的佈局是用css樣式控制。
• 搜索列表使用 lin-ui 中的 WaterFlow佈局組件。

搜索框實現

搜索框就是照着 Searchbar組件 文檔實現，所以wxml佈局以下：

<l-search-bar placeholder="搜索" bg-color="#F6F6F6" shape="circle" show-cancel="{{false}}" bind:linconfirm="bindSearch" />

有了搜索佈局以後，就須要獲取用戶輸入的內容，而後調用接口去搜索相關數據了。

bindSearch: function(e) {
    let that = this
    // 獲取輸入的信息
    let q = e.detail.value
    // 調用搜索書籍的接口
    bookModel.getSearchBooks(q, 0, 20)
      .then(res => {
        let data = res;
        if (data.length > 0) {
          that.setData({
            bookList: data
          });
          // 參數2 true表示清除原有數據
          wx.lin.renderWaterFlow(data, true, () => {
            console.log('渲染成功')
          })
        } else {
          that.setData({
            bookList: []
          });
        }
      })
  },

熱搜實現

熱搜佈局主要使用 card組件 + Tag組件 渲染。

Card組件主要是提供左上角的提示文本以及背景圓角，而Tag組件主要顯示熱搜的結果。 wxml佈局以下：

<l-card type="primary" title="熱門搜索" plaintext="{{true}}" full="{{true}}">
    <!-- 熱搜 -->
    <view class="content">
      <block wx:for="{{hotBooks}}" wx:key="index">
        <view class="hot-search-item">
          <l-tag shape="circle" bind:lintap="toBookDetail" data-id="{{item.id}}">{{item.name}}</l-tag>
        </view>
      </block>
    </view>
  </l-card>

從佈局中能夠看出咱們須要傳遞hotBooks集合給頁面，所以在js文件中須要請求熱搜接口，獲取到熱搜數據而後賦值給hotBooks集合，僞代碼以下：

bookModel.getHotSearchBooks()
      .then(res => {
        if (res.length > 0) {
          that.setData({
            hotBooks: res
          });
        } else {
          that.setData({
            hotBooks: []
          });
        }
      })

網格列表實現

網格佈局是採用 WaterFlow佈局組件 實現的。官方文檔寫的很好，看一遍基本就能當即使用了。

這裏作了空視圖的處理，也就是若是沒搜索到數據會顯示空視圖，若是有數據纔會顯示網格佈局。因此wxml的代碼以下：

<view class="book-container" wx:else>
  <!-- 搜索列表 -->
  <block wx:if="{{bookList.length > 0}}">
     <l-water-flow generic:l-water-flow-item="book-item" column-gap="20rpx" />
  </block>

  <block wx:else>
    <view class="empty-container">
      <image class="userinfo-avatar" src="../../images/sad.png" background-size="cover"></image>
      <view class="donut-container">空空如也</view>
    </view>
  </block>
</view>

上面的網格佈局中的l-water-flow-item="book-item"，指的是一個組件。 該組件就是網格中的每一本圖書佈局。實現起來都比較容易這裏就很少介紹了。 可參考 WaterFlow佈局組件 以及 小程序自定義組件

以上就是本次的介紹。

---

掃碼關注公衆號，輕撩便可。

原文出處：https://www.cnblogs.com/gdragon/p/12014028.html