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 に移動されました
いくつかの記事を読んだ後、ようやく MySQL で row_number() ソートを実装する方法が...
-9999 ピクセルの画像置換技術は、ここ 10 年近く人気があります。テキスト要素を画像に置き換え...
目次1. まず最初のリンクを取得する2. ブラウザでこのリンクを開いてください3. アドレスを開くと...
年、月、週、日グループによる MySQL クエリ1. 学年別検索 SELECT DATE_FORMA...
1. カラーマッチング効果のプレビュー下の GIF に示すように、ボタンの背景色が徐々に薄くなると...
目次序文ドローコールとはDrawCall はパフォーマンスにどのような影響を与えますか?ドローコール...
li はブロックレベル要素であり、デフォルトで 1 行を占めるため、水平方向の配置を実現する場合は、...
以前、MySQL クエリ文の実行プロセスについての記事がありました。ここでは、更新文の実行プロセスを...
ゼロ、背景今週の木曜日にたくさんのアラートを受け取りました。DBA に確認を依頼したところ、遅いクエ...
背景: MySQL では、レベルに制限がある場合、たとえば、ツリーの最大深度を事前に決定できる場合、...
この記事では、DIYポストカード機能を実現するためのfabricjsの具体的なコードを参考までに共有...
<br />前回の記事:優秀なデザイナーの7つの原則(1):フォントデザイン 英語 原文...
①. エイリアス(CNAME)レコードの使用方法:前回の投稿のドメイン名解決では、A レコードの解...
この記事では、マウスの動きを追跡するためのJavaScriptの具体的なコードを参考までに紹介します...
Docker に TensorFlow 環境をすばやくインストールし、TensorFlow を使用し...