最近、会社でアプリを開発する準備をしており、最終的に開発には 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 でアニメーションを記述する場合、移動前に相対位置を絶対位置に変換してからアニメーション機能を実...
前回の投稿では、Web ページの作成方法について説明しました。Web サイトは多くの Web ページ...
目次Viteを使用してvue + tsプロジェクトを作成するVue 3の3つの構文オプションAPIコ...
目次1. axiosをインストールする2. アクシオスの使用1.ホームページでaxiosを参照する2...
1. 上部と下部のリストタグ: <dl>..</dl>:上dt下層dd: カ...
位置の 4 つのプロパティ値は次のとおりです。 1.相対的な2.絶対3.修正4.静的これら 4 つの...
元データと対象データSQL文を実装する(最大) 選択 店、 月、 最大(dz,fz,sp) が最大値...
導入: Nginx (エンジン エックスと同じ発音) は、BSD のようなプロトコルに基づいてリリー...
目次1. docker環境が正常かどうかを確認する2. miniIOイメージをダウンロードする3. ...
ここでは、HTML ページのサイズを縮小した後に下部にスクロール バーを表示し、スクロール バーをス...
目次アルゴリズム戦略単一ノードの差分配列ノードの差分キー値の使用要件アルゴリズム戦略React の調...
Nginx は現在、最も人気のあるロード バランサーの 1 つです。インターネット トラフィックの...
1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...
クッキーこれはクライアント ブラウザの状態を保存するための標準的な方法です。Cookie はブラウザ...
オフセットOffset はオフセットです。関連プロパティの offset シリーズを使用すると、次の...