WeChatアプレットが検索ボックス機能を実装

WeChatアプレットが検索ボックス機能を実装

この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに共有しています。具体的な内容は次のとおりです。

効果:

wxml ファイル:

<view class="search_input">
        <navigator url="/pages/search/search" open-type="navigate" class="navigator">
       <text class="iconfont icon-guanbi"></text> 検索</navigator>
</ビュー>

アイコンスタイルはテキストにインポートする必要があります。ここではiconfontを使用します。
urlはリダイレクト先のページです

.検索入力{
  高さ: 90rpx;
  背景色: #eb4450;
  パディング: 10rpx;
} 
.search_input .navigator{
  背景色: #fff;
  高さ: 100%;
  ディスプレイ: フレックス;
  コンテンツの中央揃え: 中央;
  アイテムの位置を中央揃えにします。
  境界線の半径: 15rpx;
  色: #999;
  フォントサイズ: 32rpx;
}

.js の場合:

コンポーネントがグローバルスタイルを参照する場合は、次の属性を追加する必要があります。

オプション:{
      グローバルクラスを追加:true、
  },

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットが検索ボックス機能を実装、落とし穴も
  • WeChatアプレット検索ボックススタイルと検索ページへのジャンプ(アプレット検索機能)
  • WeChatミニプログラムが検索ボックスでTaobaoの人気検索ワードを模倣
  • WeChat アプレット検索ボックス コンポーネントのコード例
  • WeChatアプレットがトップ検索ボックスを実装

<<:  ウェブサイトに最も必要なのは、ターゲットユーザーグループのエクスペリエンスを向上させることです。

>>:  Web デザイン TabIndex 要素

推薦する

セマンティックウェブページ XHTML セマンティックマークアップ

構造とプレゼンテーションを分離するもう 1 つの重要な側面は、セマンティック マークアップを使用して...

mysql 5.7.19 最新バイナリインストール

まず、公式ウェブサイト http://dev.mysql.com/downloads/mysql/ ...

Ubuntuのソースリスト(ソースリスト)を変更する方法詳細説明

導入Ubuntu のデフォルトのソースは国内サーバーではないため、更新されたソフトウェアのダウンロー...

JavaScript BOM の説明

目次1. BOMの紹介1. JavaScriptは3つの部分から構成される2.ウィンドウオブジェクト...

システムメンテナンスページにリダイレクトするように nginx を設定する

先週末、兄弟プロジェクトはより良いサービスを提供するためにサーバーを拡張する準備をしていました。兄弟...

MySQLストアドプロシージャを変更する詳細な手順

序文実際の開発では、ビジネス要件が変更されることが多いため、ストアド プロシージャの特性を変更するこ...

Mysql5.7 で JSON 操作関数を使用する手順

序文JSON は、言語に依存しないテキスト形式を使用する軽量のデータ交換形式で、XML に似ています...

Dockerが新しいイメージをロードした後にリポジトリとタグ名が両方ともnoneになる問題を解決する

次のコマンドを使用できます: docker tag [イメージID] [名前]:[バージョン]例えば...

MySQLインデックス最適化分析に関する簡単な説明

記述した SQL クエリが遅いのはなぜですか?作成したインデックスが頻繁に失敗するのはなぜですか?こ...

Dockerコンテナにホストディレクトリへの書き込み権限がない場合の解決策

Docker コンテナを適用する場合、多くの場合、ホスト ディレクトリを Docker コンテナにマ...

MySQL 5.5 の導入に関する問題

MySQL の導入現在、会社ではプラットフォーム運用を通じてMySQLを導入しています。金曜日、プラ...

進捗バーのネイティブ JavaScript 実装

進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりで...

nginxで複数のサーバーを簡単に構成する方法

1: nginx のインストール方法については詳しく説明しません。Baidu で検索してください。 ...

MySQL 同時実行制御の原則に関する知識ポイント

Mysql は、高性能なデータ ストレージ サービスを提供する主流のオープン ソース リレーショナル...

WindowsシステムでPhPStudy MySQLの起動に失敗する問題を解決する

エラーを報告するApache\Nginx サービスは正常に起動しましたが、MySQL は起動に失敗し...