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 要素

推薦する

JavaScript でオブジェクトをトラバースする 5 つの方法 サンプルコード

目次準備する5つの武器…のためにオブジェクト.キーオブジェクト.getOwnPropertyName...

CSS での三角形の描画と巧妙な応用例の詳細な説明

鉛Web ページ上の一般的な三角形の一部は、画像やフォント アイコンにする必要なく、CSS を使用し...

CSS3は三角形の連続拡大効果を実現します

1. CSS3の三角形は特殊効果でズームし続けます11.1 画像プレビュー 11.2 index.h...

MySQLはinet_atonとinet_ntoaを使用してIPアドレスデータを処理します。

この記事では、適切な形式を使用して IP アドレス データをデータベースに保存し、IP アドレスを簡...

webpackの遅延読み込みとプリロードの詳細な説明

目次通常の読み込み遅延読み込みプリロードプリロードを使用しないプリロードの使用要約する通常の読み込み...

MySQL の null と not null、null と空の値の違いの詳細な説明 ''''

MySQL を長い間使用してきた多くの人は、これら 2 つのフィールド属性の概念をまだよく理解して...

Javascript 非同期プログラミング: Promise を本当に理解していますか?

目次序文基本的な使い方文法エラー処理プロミスチェーン呼び出し非同期と待機よく使われる方法1. Pro...

HTML フォームとフォーム内部タグの使用

コードをコピーコードは次のとおりです。 <html> <ヘッド> <t...

フロントエンド JavaScript におけるリフレクションとプロキシ

目次1. 反射とは何ですか? 2. JavaScriptで反映する2.1 Reflect.get(タ...

サーバー間のファイル バックアップ ソリューション、サーバー ファイルを別のサーバーに自動的にバックアップする方法は?

多くの組織ではファイル サーバーをバックアップする必要があり、あるサーバーから別のファイル サーバー...

jQuery の CSS スタイル属性 css() と width() の完全ガイド

目次1. css() の基本的な使用法: 1.1 CSSプロパティを取得する1.2 CSSプロパティ...

Sitemesh チュートリアル - ページ装飾技術の原理と応用

1. 基本概念1. Sitemeshはページ装飾技術です。 1 : フィルターを通してページアクセス...

Vue のドロップダウン ボックスのセカンダリ リンク効果を実装するためのサンプル コード

1. 成果を達成する 2. バックエンドから返されるデータ形式 「リスト」: [ { "i...

初心者向けの MySQL のインストール方法 (効果が実証済み)

1. ソフトウェアのダウンロードMySQL のダウンロードとインストール:公式サイトのダウンロード...