目次
序文
ホームページは顧客に検索ボックスを提供します, 顧客が欲しいコンテンツを検索できるようにします. ここで, 検索ページへのジャンプを実現するためにナビゲーションバーが必要です. 効果は次のとおりです.
アプリ、H5効果
アプレット効果
1.APPおよびH5と互換性があります
共通の titleNView 構成コード例では、次のように基本スタイルのコードを確認できます。
{
"pages": [{
"path": "pages/index/index", //首页
"style": {
"app-plus": {
"titleNView": false //禁用原生导航栏
}
}
}, {
"path": "pages/log/log", //日志页面
"style": {
"app-plus": {
"bounce": "none", //关闭窗口回弹效果
"titleNView": {
"buttons": [ //原生标题栏按钮配置,
{
"text": "分享" //原生标题栏增加分享按钮，点击事件可通过页面的 onNavigationBarButtonTap 函数进行监听
}
],
"backButton": { //自定义 backButton
"background": "#00FF00"
}
}
}
}
}, {
"path": "pages/detail/detail", //详情页面
"style": {
"navigationBarTitleText": "详情",
"app-plus": {
"titleNView": {
"type": "transparent"//透明渐变导航栏 App-nvue 2.4.4+ 支持
}
}
}
}, {
"path": "pages/search/search", //搜索页面
"style": {
"app-plus": {
"titleNView": {
"type": "transparent",//透明渐变导航栏 App-nvue 2.4.4+ 支持
"searchInput": {
"backgroundColor": "#fff",
"borderRadius": "6px", //输入框圆角
"placeholder": "请输入搜索内容",
"disabled": true //disable时点击输入框不置焦，可以跳到新页面搜索
}
}
}
}
}
...
]
}
すべてのコンテンツが必要なわけではありません. 今回は "buttons" と "searchInput" の組み合わせを紹介します. ここでのボタンは実際には私のナビゲーションバーの左右にある 2 つの画像であり, アイコンで使用できます.目的の機能を実現します。searchInput は中央の検索ボックスです。
これは pages.json で設定する必要があり、ボタンに追加できますが、テキストまたはベクター画像を追加しても、デフォルトは右にフロートすることに注意してください。そのうちの 1 つを左にフロートするように変更できます。 Alibaba vector Pictures of gallery を使用し、ファイルをダウンロードしてインポートする. 必要な方にはフォルダを無料で提供できます.
構成コードは次のとおりです。
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "小余努力搬砖",
"app-plus": {
"titleNView": {
"searchInput": {
"backgroundColor": "#f4f4f4",
"borderRadius": "6px",
"placeholder": "请输入搜索内容",
"disabled": true
},
"buttons": [
{
"fontSrc": "/static/font/iconfont.ttf",//矢量图片引入路径
"float": "left",
"text": "\ue67a", //引入图片一定要带u
"fontSize": "24px",//大小
"color": "#666666"
},
{
"float": "right",
"text":"\ue661",
"fontSrc": "/static/font/iconfont.ttf",
"fontSize": "24px",
"color": "#666666"
}
]
}}}ジャンプの効果を得るために、ページの同じレベルにフォルダーを作成したい 検索ページについては、ホームページでページのライフサイクル onNavigationBarSearchInputClicked を使用する必要があります (この場合、フォルダーはに登録する必要がありますpages.json)
最初に必要なページにジャンプする
onNavigationBarSearchInputClicked(){
uni.navigateTo({
url:'../search/search'
})
}2.対応アプレット
pages と同じ階層に components フォルダーを作成する必要があります. このフォルダーに import でインポートしなくても登録できるように, 同名のディレクトリで以下のように slot サブフォルダーを作成します. コンポーネント内のファイルは、pages.json に登録する必要はありません。(ここで実装する主な方法は、自分で書いたスタイルで検索ボックスを表示することです)
<template>
<view class='slot'>
<slot name='left'></slot>
<slot name='center'></slot>
<slot name='right'></slot>
</view>
</template>
<script>
export default {
name:"search-slot",
data() {
return {
};
}
}
</script>
<style scoped>
.slot{
width: 750rpx;
display: flex;
}
</style>ホームページでスロットを紹介します（知らない場合や忘れた場合は、ブロガーからスロットの教えを学ぶことができます）、写真はアリババのベクター画像をインポートしたもので、写真は私が事前に準備したもので、必要な人は誰でもチャットできますプライベートで私と。以下は事前に用意したもので、クラスを使用してインポートするだけです
<search-slot class='flex'>
<view class="left" slot='left'>
<text class="iconfont icon-xiaoxi"></text>
</view>
<view class="center" slot='center'>
<text class="iconfont icon-sousuo" @click="search"></text>
</view>
<view class="right" slot='right'>
<text class="iconfont icon-richscan_icon"></text>
</view>
</search-slot>
ここで、検索ナビゲーションをクリックして検索ページにジャンプする必要もあり (今回は、pages.json にフォルダーを登録する必要があります)、これは @click バインディング イベントを通じて行われ、パスは同じメソッド (作成) です。専用検索ページ）
methods: {
search(){
uni.navigateTo({
url:'../search/search'
})
}}css スタイルコード
<style>
.flex {
display: flex;
height: 88rpx;
line-height: 88rpx;
align-items: center;
}
.left {
width: 44rpx;
flex: 0 0 44px;
align-items: center;
text-align: center;
}
.center {
flex: 1;
height: 60rpx;
line-height: 60rpx;
background-color: #eee;
text-align: center;
color: #ccc;
}
.right {
width: 44rpx;
flex: 0 0 44px;
align-items: center;
text-align: center;
}
</style>第三に、同時互換性を実現する
上記のコードにより、検索ボックス ナビゲーション バーが app、h5、およびアプレットで実現されましたが、アプリ、h5、およびアプレットを同時に満たしたい場合は、地域的な判断を行う必要があります。
互換性により表示されず、上記の 2 つの検索ボックス ナビゲーション バーが同時に設定されている場合、アプレットの設定と互換性があるため、アプリと h5 に 2 つの検索ボックスが表示されます。
ただし、アプレットは pages.json で構成された検索ボックスと互換性がないため、アプレットは 1 つしかありません。
現時点では緊張しないでください。まだメディア クエリを覚えていますか。ここでの方法はメディア クエリとほぼ同じです。特定の環境で特定のスタイルを使用します。公式 Web サイトのドキュメントで条件付きコンパイルを見つけることができます。
コードが条件にラップされている限り、使用は非常に簡単です。WeChat アプレットでコンパイルされた条件でのみ、ここでアプレットをラップするだけで済みます。
#ifdef MP
需条件编译的代码
#endif コードは以下のように表示されます
ホームページに設定されたアプレットのナビゲーションバーをラップします（アプレットはpages.jsonの設定と互換性がないので、ここで条件付きコンパイルが必要かどうかは気にする必要はありません）。アプレットのは、アプリと h5 に表示されません。これにより、同時互換性の効果が得られます。
<!--#ifdef MP -->
<search-slot class='flex'>
<view class="left" slot='left'>
<text class="iconfont icon-xiaoxi"></text>
</view>
<view class="center" slot='center'>
<text class="iconfont icon-sousuo" @click="search"></text>
</view>
<view class="right" slot='right'>
<text class="iconfont icon-richscan_icon"></text>
</view>
</search-slot>
<!--#endif-->