uniapp小程序之配置首頁搜索框功能的實現(xiàn)
本文效果圖：
??正文
注意：我們介紹一下本次開發(fā)使用的是
uniapp，本次分享內(nèi)容的搜索框為禁止輸入搜索框，點擊跳轉(zhuǎn)專屬搜索頁面。
??1、查閱官網(wǎng)配置搜索框pages配置項
配置鏈接：uni-app官網(wǎng) (dcloud.net.cn)
1.1 首先進(jìn)入官網(wǎng)后找到如下內(nèi)容
![]](http://img.jbzj.com/file_images/article/202209/2022090914182136.png)
1.2 如官網(wǎng)所示 style的說明如下，看圖操作
用于設(shè)置每個頁面的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色等。
頁面中配置項會覆蓋 globalStyle 中相同的配置項.
1.3 跳轉(zhuǎn)指定的app-plus配置項
我們需要配置的是導(dǎo)航欄，所以選擇
titleNView屬性，根據(jù)自己的需求去選擇即可。
1.4 導(dǎo)航欄配置屬性如下，選擇我們需要的即可
??2、配置APP端與H5端搜索框（小程序端不兼容）
看了上面官網(wǎng)的截圖，細(xì)心的小伙伴應(yīng)該發(fā)現(xiàn)了，我們所選的app-plus是兼容H5的但是不兼容小程序端，所以我們需要自己手動編寫小程序端的內(nèi)容，詳情看下文。
2.1 找到pages.json文件，配置搜索框
在pages配置項中，找到我們需要配置搜索框的頁面位置，添加style配置項。示例代碼如下：
{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": {
"searchInput": {
"align": "left",
"backgroundColor": "#F6F7F8",
"borderRadius": "40px",
"disabled": true,
"placeholder": "默認(rèn)提示文本",
"placeholderColor": "#959FA0"
},
"buttons": [{
"float": "right",
"text": "分類",
"fontSize": "14px",
"color": "#959FA0",
"colorPressed": "#333333" // 按下狀態(tài)按鈕顏色
}]
}
}
}
}
寫完上面的代碼我們可以看一下效果圖：
搜索框已經(jīng)出現(xiàn)在我們首頁的頂部，是我們所預(yù)期的效果。
2.2 監(jiān)聽搜索框與按鈕的點擊事件
搜索框點擊事件與按鈕點擊事件
我們需要的就是上面兩個方法
onNavigationBarSearchInputClicked與onNavigationBarButtonTap
示例代碼如下：
<script>
export default {
data() {
return {
}
},
onLoad() {
},
// 監(jiān)聽原生搜索框的點擊事件
onNavigationBarSearchInputClicked() {
console.log("在這里指定我們的跳轉(zhuǎn)路徑")
/* uni.navigateTo({
url: 'pages/search/search'
}); */
},
// 監(jiān)聽原生標(biāo)題欄按鈕的點擊事件
onNavigationBarButtonTap() {
console.log("監(jiān)聽到了原生標(biāo)題欄按鈕的點擊事件");
},
methods: {
}
}
</script>
注意：
onNavigationBarSearchInputClicked方法只有在pages.json中的searchInput配置disabled為true時才會觸發(fā)我們可以在對應(yīng)的方法內(nèi)編寫相應(yīng)的操作，例如點擊搜索框跳轉(zhuǎn)指定的搜索頁。
2.3 拓展知識：監(jiān)聽多個按鈕的點擊事件
細(xì)心的小伙伴能發(fā)現(xiàn)，官方文檔中的按鈕點擊事件按鈕是一個數(shù)組而不是單個的
那么監(jiān)聽多個按鈕的點擊事件我們應(yīng)該怎么去區(qū)分我們點擊的是哪個按鈕呢？
給大家演示一下：
pages.json文件內(nèi)容配置如下：
{
"path": "pages/index/index",
"style": {
"app-plus": {
"titleNView": {
"searchInput": {
"align": "left",
"backgroundColor": "#F6F7F8",
"borderRadius": "40px",
"disabled": true,
"placeholder": "默認(rèn)提示文本",
"placeholderColor": "#959FA0"
},
// 左右兩邊各有一個按鈕
"buttons": [{
"float": "right",
"text": "分類1",
"fontSize": "14px",
"color": "#959FA0",
"colorPressed": "#333333" // 按下狀態(tài)按鈕顏色
},
{
"float": "left",
"text": "分類2",
"fontSize": "14px",
"color": "#959FA0",
"colorPressed": "#333333" // 按下狀態(tài)按鈕顏色
}]
}
}
}
}
index.vue文件監(jiān)聽事件如下：
// 監(jiān)聽原生標(biāo)題欄按鈕的點擊事件
onNavigationBarButtonTap(e) {
if(e.text=='分類1'){
console.log('當(dāng)前點擊的按鈕為分類1按鈕，可做相應(yīng)操作')
}
if(e.text=='分類2'){
console.log('當(dāng)前點擊的按鈕為分類2按鈕，可做相應(yīng)操作')
}
// e 代表的是所點擊的按鈕之一，如果需要操作指定按鈕可以根據(jù)按鈕的index值或者text值去區(qū)分做出不同的響應(yīng)操作
console.log(e);
console.log("監(jiān)聽到了原生標(biāo)題欄按鈕的點擊事件" + e.text);
}
點擊其中一個按鈕e輸出結(jié)果如下，我們可以根據(jù)text屬性和index屬性去區(qū)分不同的按鈕去完成相應(yīng)的操作。
{
"color": "#959FA0",
"colorPressed": "#333333",
"float": "left",
"fontSize": "14px",
"fontWeight": "normal",
"index": 1,
"text": "分類2"
}
APP 和 H5效果如下：
??3、配置微信小程序搜索框
上文寫到的我們配置的
app-plus是不適配小程序端的，所以我們需要自己去手寫一個搜索導(dǎo)航欄。示例代碼中的class類中的類名樣式是我已經(jīng)在全局配置好的，由于篇幅比較長，之后的小程序文章也會經(jīng)常使用，點擊鏈接跳轉(zhuǎn)下載可查看相對應(yīng)的樣式。
示例代碼如下：
<template>
<view>
<!-- #ifdef MP -->
<!-- 只編譯到微信小程序端 -->
<view class="flex align-center fixed-top" style="height: 44px;">
<!-- 搜索框 -->
<view class="ml-2 flex align-center flex-1 rounded-circle px-1"
style="background-color: #F6F7F8;color: #959FA0;" @click="GoSearch()">
<text class="iconfont iconsousuokuang"
style="margin-right: 8px;font-size: 20px;"></text>
<text>點擊搜索框跳轉(zhuǎn)專屬搜索頁面</text>
</view>
<view class="flex align-center px-2" style="color:#959FA0;" @click="classify()">分類</view>
</view>
<!-- #endif -->
</view>
</template>
<script>
export default {
data() {
return {}
},
onLoad() {
},
// 監(jiān)聽原生搜索框的點擊事件
onNavigationBarSearchInputClicked() {
console.log("在這里指定我們的跳轉(zhuǎn)路徑")
/* uni.navigateTo({
url: 'pages/search/search'
}); */
},
// 監(jiān)聽原生標(biāo)題欄按鈕的點擊事件
onNavigationBarButtonTap() {
console.log("監(jiān)聽到了原生標(biāo)題欄按鈕的點擊事件" + e.text);
},
methods: {
GoSearch() {
console.log("跳轉(zhuǎn)到搜索頁");
},
classify() {
console.log('點擊了分類按鈕');
}
}
}
</script>
微信小程序端效果圖如下，自定義方法也是比較簡單的：
到這里我們的搜索導(dǎo)航欄配置三端完畢啦，期待大家的交流指點
到此這篇關(guān)于uniapp小程序之配置首頁搜索框的文章就介紹到這了,更多相關(guān)uniapp搜索框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端，下面這篇文章主要給大家介紹了axios學(xué)習(xí)教程的相關(guān)資料，文中介紹的非常詳細(xì)，對大家具有一定的參考價值，需要的朋友下面來一起看看吧。2017-03-03
這篇文章主要介紹了JS實現(xiàn)字體選色板實例代碼，有需要的朋友可以參考一下2013-11-11
優(yōu)雅的使用javascript遞歸畫一棵結(jié)構(gòu)樹示例代碼
這篇文章主要給大家介紹了關(guān)于如何優(yōu)雅的使用javascript遞歸畫一棵結(jié)構(gòu)樹的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
javascript對數(shù)組的常用操作代碼 數(shù)組方法總匯
js下數(shù)組也是比較常用的，對數(shù)組元素的處理也是有非常多的方法，這里整理了下，需要的朋友可以參考下。2011-01-01
這篇文章主要介紹了常見JS驗證腳本,結(jié)合實例形式匯總分析了JavaScript用于驗證的系統(tǒng)自帶函數(shù)與自定義函數(shù),具有一定參考借鑒價值,需要的朋友可以參考下2015-12-12
下面小編就為大家?guī)硪黄昝澜鉀QIE不支持Data.parse()的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起 小編過來看看吧2016-11-11
JS實現(xiàn)仿餓了么在瀏覽器標(biāo)簽頁失去焦點時網(wǎng)頁Title改變
這篇文章主要介紹了JS實現(xiàn)仿餓了么在瀏覽器標(biāo)簽頁失去焦點時網(wǎng)頁Title改變,需要的朋友可以參考下2017-06-06
JS實現(xiàn)的獲取銀行卡號歸屬地及銀行卡類型操作示例
這篇文章主要介紹了JS實現(xiàn)的獲取銀行卡號歸屬地及銀行卡類型操作,結(jié)合實例形式分析了javascript不依賴第三方接口計算銀行卡歸屬地相關(guān)信息操作技巧,需要的朋友可以參考下2019-01-01
JavaScript生成器函數(shù)Generator解決異步操作問題
這篇文章主要為大家介紹了JavaScript生成器函數(shù)Generator解決異步操作問題示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-10-10
這篇文章主要介紹了Javascript實踐中的命令模式，對命令模式感興趣的同學(xué)，可以參考下2021-05-05