WeChatアプレットは検索機能を実装し、検索結果ページにジャンプします

検索ページ:

search.wxml ページ:

    <view class="form">
      <input class="searchInput" value='{{keyWord}}' bindconfirm='goSearch' placeholder="検索キーワードを入力してください" type="text" />
    </ビュー>

search.wxss スタイル:

。形状 {
  位置: 相対的;
  高さ: 40px;
}
 
.検索入力{
  境界線: 1px 実線 #2c3036;
  高さ: 40px;
  行の高さ: 40px;
  フォントサイズ: 14px;
  境界線の半径: 20px;
  色: #bebec4;
  左パディング: 35px;
}

検索.js:

  // SearchgoSearch: function(e) {
    var that = this;
    var フォームデータ = e.detail.value;
    if (フォームデータ) {
 
      wx.リクエスト({
 
        URL: 'https://xxxxx/homepage/search',
        データ： {
          タイトル: フォームデータ
        },
 
        ヘッダー: {
          'コンテンツタイプ': 'application/json'
        },
        成功: function(res) {
          that.setData({
            検索: res.data,
          })
          if (res.data.msg=='関連動画はありません'){
            wx.showToast({
              タイトル: 「関連動画はありません」
              アイコン: 'なし'、
              所要時間: 1500
            })
          }それ以外{
            str = JSON.stringify(res.data.result.data); とします。
            wx.navigateTo({
              url: '../searchShow/searchShow?data=' + 文字列
            })
          }
          
          // コンソールログ(res.data.msg)
        }
      })
    } それ以外 {
 
      wx.showToast({
        タイトル: '入力は空にできません'、
        アイコン: 'なし'、
        所要時間: 1500
      })
 
    }
  }

検索結果:

searchShow.wxml ページ:

<ビュークラス="コンテナ">
  <view class="listBox" wx:for="{{searchShow}}" wx:key="{{item.id}}">
    <view class="listMain">
      <ナビゲーター url='../videoShow/videoShow?id={{item.id}}'>
        <image src="{{item.image}}" mode="widthFix"></image>
        <ビュークラス='リストタイトル'>
          <view class="listSubtitle">
            <テキスト>{{アイテム.タイトル}}</テキスト>
          </ビュー>
          <view class="listText">
            <text>{{item.description}}</text>
          </ビュー>
        </ビュー>
      </ナビゲーター>
    </ビュー>
  </ビュー>
</ビュー>

検索表示.js

  onLoad: 関数(オプション) {
    searchShow を JSON.parse(options.data) とします。
    それを = これとする
    that.setData({
      検索表示: 検索表示
    })
    console.log(検索表示)
  },

WeChatミニプログラムで検索機能を実装し、検索結果ページにジャンプする方法についての記事はこれで終わりです。検索とジャンプコンテンツを実装する関連ミニプログラムの詳細については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません: