フルスタックアイテム|小さな本棚|小型マイクロチャネルプログラム - 検索機能を実現します

レンダリング

ここに画像を挿入説明

図は、検索機能のレンダリングがアプレット側の実装です。
ホームの検索ページを入力して検索ボタンをグラフクリックから見ることができます。

レイアウトスタイルは以下のとおりです。コンテンツ検索リストをトレンド検索ボックス+ +。

ボックスサーチ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、レイアウトコンポーネントと小さいコンポーネントのカスタマイズ

上記は、この紹介です。

世間の注目のスキャンコード番号が、光にプルアップ。

ここに画像を挿入説明