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

推薦する

事例を通してLinux NFSの仕組みを詳細に分析

前回の記事に引き続き、web02 サーバーを作成し、web01 サーバーと web02 サーバーの ...

Ubuntu で FTP サーバーを構築する方法の詳細な説明 (成功保証)

1. 今日の午後、コースの要件により、Ubuntu で FTP サーバーを設定する実験を行う必要が...

HTML テーブル境界制御実装コード

一般的に、テーブルを使用する場合は、常に <table border="1"...

WeChat公式アカウントでReactプロジェクトを実行する方法

目次1. a タグを使用して PDF をプレビューまたはダウンロードします。書き方は、携帯電話でクリ...

フォーム送信時に追加のパラメータを渡すためのいくつかの一般的な方法

フォームを送信するときに、送信前に追加のパラメータが追加される状況が発生する場合があります。この問題...

Vueカスケードドロップダウンボックスの設計と実装

目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...

Linux C++ マルチスレッド同期の非常に詳細な説明

目次1. ミューテックス1. ミューテックスの初期化2. ミューテックスロックの関連特性と分類3. ...

Linux の一般的な Java プログラム起動スクリプトのコード例

シェルを起動する頻度は非常に低いですが。 。 。しかし、書くたびに、多くの jar ファイル パスを...

JSONP クロスドメインシミュレーション Baidu 検索

目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...

最新の超詳細な VMware 仮想マシンのダウンロードとインストールのグラフィック チュートリアル

目次1. 仮想マシンをダウンロードする2. 仮想マシンのインストールVMware のダウンロードとイ...

Linux で SpringBoot jar プログラム デプロイメント シェル スクリプトを起動および停止する方法

では早速、コードをお見せしましょう。具体的なコードは次のとおりです。 #!/bin/bash cd ...

Linux7 ベースの Hadoop のインストールと構成の詳細なグラフィック説明

上記のように材料を準備します(ps: hadoop-3.1.2-srcはhadoop-3.1.2に変...

Gokudōゲームにおけるフロントエンド知識のまとめ

背景日本語を学び始めた当初は、日本語の50音を覚えるのは簡単ではなく、特にカタカナを覚えるのは困難で...

Zabbixのインストールと展開の詳細な説明

序文Zabbix は最も主流のオープンソース監視ソリューションの 1 つです。導入自体は難しくありま...

Vue3 手動カプセル化ポップアップ ボックス コンポーネント メッセージ メソッド

この記事では、ポップアップボックスコンポーネントメッセージのVue3手動カプセル化の具体的なコードを...