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

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/sea​​rchShow?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を応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットが検索ボックス機能を実装
  • WeChatミニプログラムで検索キーワードを強調表示するサンプルコード
  • WeChatアプレット検索ボックススタイルと検索ページへのジャンプ(アプレット検索機能)
  • WeChatアプレット開発検索機能実装(フロントエンド+バックエンド+データベース)
  • WeChatアプレットにドロップダウンボックス検索機能を実装する方法
  • ミニプログラムは検索インターフェースを実装します ミニプログラムは推奨検索リスト効果を実装します
  • WeChatアプレットで、指定された観光スポット周辺の食事やホテルを検索できます

<<:  柔軟で安定した高品質の HTML および CSS コード標準を作成するためのガイド

>>:  Dockerでデータディレクトリを移行する方法

推薦する

js キャンバスはスライダー検証を実現します

この記事の例では、スライダー検証を実装するためのjsキャンバスの具体的なコードを参考までに共有してい...

MySQL における制限関数と合計関数の混在使用の問題の詳細な説明

序文今日、注文データを同期した後、同僚は、合計注文金額とデータソースの合計金額に差があったため、LI...

PHP で JSON バックスラッシュを削除する例

1. 「stripslashes($_POST['json']);」メソッドを使用し...

MySQL 1130例外、リモートログインできない解決策

目次質問: 1. リモートログイン権限を有効にする: 2. MySQLの権限を更新します。 3. テ...

VMware Workstation 15 Pro インストール ガイド (初心者向け)

01. VMware Workstation Pro 15 のダウンロードダウンロード: VMwa...

SQLシリアル番号取得コード例

この記事は主にSQLシリアル番号取得コード例を紹介します。記事ではサンプルコードを詳細に紹介しており...

Vueは虫眼鏡付きの検索ボックスを実装します

この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...

Kylin V10 サーバーで Storm をコンパイルしてインストールする詳細なプロセス

1 はじめにApache Storm は、Hadoop と同様に、大量のデータを処理するために使用で...

FTP環境設定ソリューション(vsftpd)の詳細な説明

1. vsftpdコンポーネントをインストールするインストールコマンド: [root@ink4t ~...

Mysql テーブルコメントフィールド取得操作

余計なことは言わないで、コードだけ見てみましょう〜 -- テーブル内のフィールドコメントを表示および...

MySQL Community Server 5.7.19 インストール ガイド (詳細)

MySQL公式サイトのzipファイルのダウンロードリンク https://dev.mysql.co...

HTMLのテーブルの内容は中央に水平と垂直に表示されます

CSSスタイルファイルで指定 #class td /*表のテキストを左右上下に揃えるように設定する*...

MySql インデックスの詳細な紹介と正しい使用方法

MySql インデックスの詳細な紹介と正しい使用方法1. はじめに:インデックスはクエリ速度に重大な...

Docker コンテナの uid と gid の詳細な理解

デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...

ReactRouterの実装

ReactRouterの実装ReactRouterはReactのコアコンポーネントです。主にReac...