最近、会社でアプリを開発する準備をしており、最終的に開発には uni-app フレームワークを使用することになりました。しかし、設計図を渡されたとき、設計図の上部が次のようだったので少し不安を感じました。 この機能はアプレットでは利用できないため、実装できないと感じました。しかし、ドキュメントを見直してみると、この機能は実装可能であることがわかりました。pages.json でいくつかの設定を行う必要があります。 これは正式には app-plus と呼ばれ、ナビゲーション領域をカスタマイズできます。具体的な構成は次のとおりです。 「ページ」: [ { "パス": "ページ/インデックス/インデックス", 「スタイル」: { "ナビゲーションバーの背景色": "#00c170", 「アプリプラス」: { "バウンス": "なし", "タイトルNビュー": { 「ボタン」: [ { "テキスト": "マップ", "フォントサイズ":"16", "float": "右", "色":"#fff" }, { "テキスト": "唐山", "フォントサイズ":"16", "フロート": "左", "色":"#fff" } ]、 "検索入力":{ "整列": "中央", "placeholder": "物件を検索するための情報を入力してください", "境界半径":"50upx", "背景色": "#fff" } } } } } ] 効果は以下のとおりです。 クリック イベントと入力ボックス イベントをどのように監視すればよいのか疑問に思うかもしれません。 uni-app は、対応する API、onNavigationBarButtonTap および onNavigationBarSearchInputChanged を提供しており、これらは応答ページに記述できます。 エクスポートデフォルト{ ナビゲーションバーボタンタップ() { console.log("ボタンをクリックしました") }, ナビゲーションバーの検索入力が変更されました () { console.log("情報を入力しました") } } 結果を印刷: しかし、ボタンは 2 つありますが、ボタン イベントは 1 つしかありません。どうすればよいでしょうか?入力ボックス内のテキストを取得するにはどうすればよいですか?実際、これら 2 つの関数は対応する情報である値を受け取ります。 エクスポートデフォルト{ onNavigationBarButtonTap(val) { コンソール.log(値) }, onNavigationBarSearchInputChanged (val) { コンソール.log(値) } } 結果を印刷: ボタンイベントは対応するテキストに応じて判断することができ、入力ボックスは変更イベントではなく入力イベントをリッスンします。つまり、フォーカスを失うのではなく、入力後にリッスンすることができます。 それで終わりだと思いますか?いやいやいや、鋭い目を持つ学生は、私がやったことはデザインと違うことに気づきました。右側の地図に私が書いていないアイコンがあります。上記の方法に従うと、それを追加することはできませんが、ナビゲーションバーのカスタマイズを削除することはできます。 page.json 内の各ページのナビゲーション バーはデフォルトで有効になっています。デフォルト値が default の navigationStyle 属性があります。これを custom に変更することで削除できます。 { "パス": "ページ/インデックス/インデックス", 「スタイル」: { "ナビゲーションスタイル":"カスタム" } ただし、モバイル ナビゲーションはまだ存在するため、次のようにナビゲーション バーを具体的に設定するために使用される titleNView 属性を使用する必要があります。 { "パス" : "pages/secondPage/secondPage", 「スタイル」:{ "ナビゲーションスタイル": "カスタム", 「アプリプラス」: { "titleNView": 偽 } } } 次に、ナビゲーションのセットを自分で記述します。最終的な効果は次のようになります。 ここで落とし穴があります。このナビゲーションの位置を固定することに加えて、デフォルトのナビゲーションを削除したため、携帯電話の上部にあるステータス バーは実際には透明になっています。 したがって、ナビゲーションを記述するときは、ステータス バーが確実にカバーされるように、上余白を下余白より少し大きくします。 私が書いたソースコードは次のとおりです。 <テンプレート> <view class="head"> <view class="header-wrap"> <view class="index-header"> <text class="address" v-if="leftWords">{{leftWords}}</text> <view class="input-wrap" v-if="input"> <入力タイプ="テキスト" placeholder="検索を入力してください" v-model="値" @change="入力変更"/> <text class="iconfont iconfangdajing"></text> </ビュー> <view class="map-wrap" v-if="rightWords||rightIcon" @click="右クリック"> <text class="iconfont" :class="rightIcon"></text> <text>{{rightWords}}</text> </ビュー> </ビュー> </ビュー> <view class="blank"></view> </ビュー> </テンプレート> <スクリプト> エクスポートデフォルト{ 名前: "IndexHeader", 小道具: [ '左単語', '入力'、 '右アイコン', '正しい言葉' ]、 データ () { 戻る { 価値: '' } }, メソッド: { 入力変更: 関数 () { this.$emit('change',this.value) }, 右クリック: 関数 () { this.$emit("右クリック") } } } </スクリプト> <スタイル lang="scss"> $カラーベース: #00c16f; $words-color-base: #333333; $words-color-light: #999999; .ヘッダーラップ{ 幅: 100%; 位置: 固定; 上: 0; zインデックス: 999; .インデックスヘッダー{ 高さ: 88upx; 行の高さ: 88upx; パディング: 0 30upx; パディングトップ: 40upx; 背景色: $color-base; フォントサイズ: 28upx; 色: #fff; ディスプレイ: フレックス; アイテムの位置を中央揃えにします。 コンテンツの両端揃え: スペースの間; 。住所 { フォントサイズ: 26upx; } .input-wrap { 幅: 500upx; 高さ: 70upx; パディング: 10upx 30upx 10upx 100upx; ボックスのサイズ: 境界線ボックス; 背景色: #fff; 境界線の半径: 50upx; 色: $words-color-base; 位置: 相対的; 文章 { 位置: 絶対; 左: 40upx; 上: -8upx; 色: $words-color-light; フォントサイズ: 30upx; } } .map-wrap { .アイコンフォント{ フォントサイズ: 32upx; 右マージン: 5upx; } 文章 { フォントサイズ: 26upx; } } } } 。空白 { 高さ: 126upx; } </スタイル> 上記は、uni-app を使用して上部ナビゲーションバーにボタンと検索ボックスを表示する方法の詳細です。uni-app を使用して上部ナビゲーションバーにボタンと検索ボックスを表示する方法の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
<<: Windows 10 1903 エラー 0xc0000135 の解決方法 [推奨]
この記事では、参考までに、jsで書かれたシンプルなスネークゲームの具体的なコードを紹介します。具体的...
HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...
この記事では、ショッピングカートの完全な機能を実現するためのjQueryの具体的なコードを参考までに...
序文最近、レポート機能に取り組んでいたのですが、ある月に各部署に入社した人と退職した人の数をカウント...
目次ブートオプションコマンドラインパラメータの長い形式と短い形式設定ファイル構成グループシステム変数...
zabbix_agent のデプロイメント:推奨事項: zabbix_agent は docker-...
axiosをインストールして通信を実装するここでは、axios を使用して Vue フロントエンドと...
この記事では、Vueを使用して虫眼鏡付きの検索ボックスを実装する方法を紹介します。具体的な内容は次の...
1. vue-cliをインストールする vue.js で vue.js を実行します。 2. プロジ...
Centos7 と Centos6 では、GRUB パスワードの設定手順に大きな違いがあります。これ...
目次1. はじめに2. ルール検証の入力モード2.1 サンプルコード2.2、フォーム項目2.3. 小...
質問から始めましょう5 年前、私が Tencent にいたとき、ページング シナリオでは MySQL...
目次バインディングクラスインラインスタイルのバインディングバインディングクラス方法1:オブジェクト構...
MySQLはレプリケーションフィルターを動的に変更します今日遭遇した問題についてお話しします。今日は...
[LeetCode] 176. 2番目に高い給与従業員テーブルから 2 番目に高い給与を取得する ...