微信小程序使用uni-app實現首頁搜索框導航欄功能詳解
前言
首頁都會提供一個搜索框給到客戶，讓客戶自己去搜索自己想要的內容，這裡就需要導航欄，來實現搜索頁面的跳轉，效果如下
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 函數進行監聽
}
],
"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"的組合使用，這裡的buttons其實是我的導航欄左右的兩個圖片，可以配合圖標實現想要的功能，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"
}
]
}}}
為瞭達到跳轉的效果，我要在頁面同級創建文件夾，為搜索頁面，我們要主頁使用頁面生命周期onNavigationBarSearchInputClicked（此次文件夾需要在pages.json中註冊）
來跳轉到我們先要的頁面
onNavigationBarSearchInputClicked(){
uni.navigateTo({
url:'../search/search'
})
}
二、兼容小程序
需要與pages同級創建一個components文件夾，在此文件夾下，不需要在用import引入，就可以註冊，創建一個如下的插槽子文件夾，帶同名目錄。在components中的文件都不需要在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>
在首頁中引入插槽（不會或者忘記的，可以去學習博主的一學就會的插槽教學），其中的圖片都是引入的阿裡巴巴矢量圖片，圖片是我提前準備好的，有想要的小夥伴，私聊我。如下就是我提前準備好的，隻要用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綁定事件完成的，路徑還是同樣的方法（創建一個專屬的搜索頁面）
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、小程序,實現搜索框導航欄，但是如果想要同時滿足app、h5、小程序，就需要對此作出一個區域性的判斷。
如果沒有按兼容性顯示，同時配置如上的兩個搜索框導航欄，在app、h5就會出現兩個搜索框，因為它們兼容小程序的配置
但是小程序隻有一個，因為小程序不兼容在pages.json中配置的搜索框
這時候不用緊張，我們還記得媒體查詢嗎，這裡的方式，和媒體查詢幾乎是一個意思，在特定的環境使用特定的樣式，我們這裡通過官網文檔可以找到條件編譯
使用很簡單，隻要將代碼包裹進條件中即可，我們這裡隻要將小程序的包裹進，隻在微信小程序中編譯的條件中即可
#ifdef MP
需條件編譯的代碼
#endif
代碼如下
把配置在首頁的小程序的導航欄包裹住（小程序不兼容在pages.json中的配置，這裡就不用在意是否需要條件編譯）這樣，小程序的搜索框導航不會在app、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-->
到此這篇關於微信小程序使用uni-app實現首頁搜索框導航欄功能詳解的文章就介紹到這瞭,更多相關小程序搜索框導航欄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！