1. はじめにプロジェクトで要件に遭遇したら、データを検索してキーワードを強調表示します。要件を受け取ったら、すぐに作業を開始します。まずはレンダリングをご覧ください。ソースコードは小さなプログラムコードスニペットにまとめられ、GitHub に公開されています。記事の下部にソースコードへのリンクがあります。 2. アイデアブロガーが最初に考えたのは、split を使うことでした。検索されたキーワードに応じて、バックグラウンドで返されたデータを処理し、indexOf でキーワードを見つけ、各単語に deep フィールドを追加しました。deep が true の場合は強調表示され、false の場合は通常のままになります。小さなプログラムなので、OP はそれを直接ハイライト コンポーネントにしました。コードは非常にシンプルで、実装手順は次のとおりです。 3. コードロジックシミュレーションデータは以下のとおりです リスト:[ 「武漢大学」、 「華中科技大学」 「華中師範大学」 「中南経済法大学」 「中国地質大学」 「武漢理工大学」 「華中農業大学」 「武漢理工大学」 ]、 検索キーでフィルタリングされたデータを格納するために、データに空の配列が定義されます。 filterList:[], //フィルター済み wxml と検索方法 // wxml <view class="search_box"> <input type="text" placeholder="武漢の985/211大学を入力してください" bindinput="searchValue" class="search"/> </ビュー> // 検索メソッド searchValue(e){ val = e.detail.value; とします。 this.setData({ 値:val }) 長さが0より大きい場合 this.setData({ フィルターリスト:[] }) arr = [] とします。 for(let i = 0;i < this.data.list.length;i++){ if(this.data.list[i].indexOf(val) > -1){ arr.push(このデータリスト[i]) } } this.setData({ フィルターリスト: arr }) }それ以外{ this.setData({ フィルターリスト: [] }) } } ハイライトコンポーネントのハイライトを定義します "コンポーネントの使用": { "ハイライト":"../../components/ハイライト/ハイライト" } ページ内の各項目とキーパラメータをコンポーネントに渡す <view class="list_li" wx:for="{{ filterList }}" wx:key="index" data-index="{{ index }}" bindtap="pitchOn"> <ハイライトテキスト="{{項目}}" キー="{{値}}" /> </ビュー> コンポーネントで受信 プロパティ: テキスト:文字列、 鍵:{ タイプ:文字列、 価値:''、 オブザーバー:'_changeText' } } コンポーネントの初期データ データ: { highlightList:[], //処理されたデータ} コンポーネントのwxml <text class="{{ item.deep ? 'green' : '' }}" wx:for="{{ highlightList }}" wx:key="index">{{ item.val }}</text> コンポーネントハイライトデータ処理 // 空でないfilter_changeText(e){ e.length > 0 && this.properties.text.indexOf(e) > -1 の場合{ this._filterHighlight(this.properties.text, e); } }, /** * キーワードの強調表示* @param { String } text - テキスト* @param { String } key - キーワード*/ _filterHighlight(テキスト、キー){ textList を text.split(""); とします。 keyList を key.split(""); とします。 リストを [] にします。 for(let i = 0;i < textList.length;i++){ obj = { 深い:偽、 val:テキストリスト[i] } リストをプッシュします。 }; for(let k = 0; k < keyList.length; k++){ リスト.forEach(項目 => { if(item.val === keyList[k]){ アイテムの深さを true に設定します。 } }) } this.setData({ ハイライトリスト:リスト }) } ソースコードのGitHubアドレス: https://github.com/pdd11997110103/ComponentWarehouse WeChatミニプログラムで検索キーワードのハイライトを実装するためのサンプルコードに関するこの記事はこれで終わりです。より関連性の高いミニプログラムの検索キーワードのハイライトコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMを応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: xtrabackup による MySQL データベースのバックアップと復元
>>: Telnet は Alpine イメージの busybox-extras に移動されました
テストプロジェクト: react-demo react-demo プロジェクトをサーバーにクローンし...
1.メニューバーにスタートと入力し、スタートアップアプリケーションをクリックして入力します。 2. ...
この記事では、省、市、地区の3段階選択を実現するためのjsの具体的なコードを紹介します。具体的な内容...
B ツリーは一般的なデータ構造です。彼と一緒にB+ツリーがあります。ここで、概念を明確にする必要があ...
問題の説明プロジェクトのログインページでは、7日間パスワードを記憶する必要がある機能があります。この...
ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...
別のライブラリから別のライブラリにデータをインポートする必要がある場合があり、このデータは CSV ...
MySQL 5.7.19 winx64 解凍版のインストールチュートリアルを収録しています。具体的な...
目次1. はじめに2. 利点3. 使用手順1. Vuexをインストールする2. Vuexを参照する3...
更新: MySQL の公式 Web サイトにアクセスして MySQL インストーラーをインストールし...
インターネットには、真実のように見える「噂」がたくさんあります。もちろん、悪意のあるものではありませ...
目次序文1. JDBCタイムアウト設定2. 接続プールのタイムアウト設定3. MyBatisクエリの...
序文今日 GitHub を閲覧していたところ、SQL を最適化および書き換えるための sora とい...
JavaScript - 原則シリーズ日常の開発では、既存のプロジェクトを引き継ぐときは常に、まず他...
<br />前回のWebデザインチュートリアル:Webデザインチュートリアル(3):デザ...