目錄
前言
App、H5效果
小程序效果
一、兼容APP、H5的方式
二、兼容小程序
三、實現(xiàn)同時兼容
前言
首頁都會提供一個搜索框給到客戶，讓客戶自己去搜索自己想要的內容，這里就需要導航欄，來實現(xiàn)搜索頁面的跳轉，效果如下
App、H5效果
小程序效果
一、兼容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 函數(shù)進行監(jiān)聽
}
],
"backButton": { //自定義 backButton
"background": "#00FF00"
}
}
}
}
}, {
"path": "pages/detail/detail", //詳情頁面
"style": {
"navigationBarTitleText": "詳情",
"app-plus": {
"titleNView": {
"type": "transparent"http://透明漸變導航欄 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"的組合使用，這里的buttons其實是我的導航欄左右的兩個圖片，可以配合圖標實現(xiàn)想要的功能，searchInput就是中間的搜索框
需要在pages.json中配置，可在button中添加，不過需要注意的是，不管添加文字，矢量圖片，默認都是右浮動，可以把其中一個改成左浮動，這里我使用的是阿里巴巴矢量圖庫的圖片，下載文件，引入即可有需要的小伙伴我可以免費提供一個文件夾。
?配置代碼如下
"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"
}
]
}}}為了達到跳轉的效果，我要在頁面同級創(chuàng)建文件夾，為搜索頁面，我們要主頁使用頁面生命周期onNavigationBarSearchInputClicked（此次文件夾需要在pages.json中注冊）
?來跳轉到我們先要的頁面
onNavigationBarSearchInputClicked(){
uni.navigateTo({
url:'../search/search'
})
}二、兼容小程序
需要與pages同級創(chuàng)建一個components文件夾，在此文件夾下，不需要在用import引入，就可以注冊，創(chuàng)建一個如下的插槽子文件夾，帶同名目錄。在components中的文件都不需要在pages.json注冊。（這里實現(xiàn)的主要方式，是通過自己寫的樣式，來展現(xiàn)出一個搜索框）
<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>在首頁中引入插槽（不會或者忘記的，可以去學習博主的一學就會的插槽教學），其中的圖片都是引入的阿里巴巴矢量圖片，圖片是我提前準備好的，有想要的小伙伴，私聊我。如下就是我提前準備好的，只要用class就能引入
<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綁定事件完成的，路徑還是同樣的方法（創(chuàng)建一個專屬的搜索頁面）
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>三、實現(xiàn)同時兼容
通過以上代碼，已經(jīng)實現(xiàn)了在app、h5、小程序,實現(xiàn)搜索框導航欄，但是如果想要同時滿足app、h5、小程序，就需要對此作出一個區(qū)域性的判斷。
如果沒有按兼容性顯示，同時配置如上的兩個搜索框導航欄，在app、h5就會出現(xiàn)兩個搜索框，因為它們兼容小程序的配置
但是小程序只有一個，因為小程序不兼容在?pages.json中配置的搜索框
這時候不用緊張，我們還記得媒體查詢嗎，這里的方式，和媒體查詢幾乎是一個意思，在特定的環(huán)境使用特定的樣式，我們這里通過官網(wǎng)文檔可以找到條件編譯
使用很簡單，只要將代碼包裹進條件中即可，我們這里只要將小程序的包裹進，只在微信小程序中編譯的條件中即可
#ifdef??MP
需條件編譯的代碼
#endif?代碼如下文章來源：http://www.zghlxwxcb.cn/news/detail-777048.html
把配置在首頁的小程序的導航欄包裹?。?strong>小程序不兼容在?pages.json中的配置，這里就不用在意是否需要條件編譯）這樣，小程序的搜索框導航不會在app、h5出現(xiàn)了。從而實現(xiàn)了同時兼容的效果。文章來源地址http://www.zghlxwxcb.cn/news/detail-777048.html
<!--#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-->到了這里，關于【微信小程序】使用uni-app——開發(fā)首頁搜索框導航欄（可同時兼容APP、H5、小程序）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
