uniapp小程序之配置首頁搜索框功能的實現(xiàn)
本文效果圖：
??正文
注意：我們介紹一下本次開發(fā)使用的是
uniapp，本次分享內(nèi)容的搜索框為禁止輸入搜索框，點擊跳轉(zhuǎn)專屬搜索頁面。
??1、查閱官網(wǎng)配置搜索框pages配置項
配置鏈接：uni-app官網(wǎng) (dcloud.net.cn)
1.1 首先進入官網(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)的截圖，細心的小伙伴應(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": "默認提示文本",
"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)聽多個按鈕的點擊事件
細心的小伙伴能發(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": "默認提示文本",
"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)文章
微信小程序彈窗是小程序在需要提示用戶的時候,顯示的一種交互形式,下面這篇文章主要給大家介紹了關(guān)于微信小程序四種彈窗方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
實現(xiàn)div滾動條默認最底部以及默認最右邊的示例代碼
下面小編就為大家分享一篇實現(xiàn)div滾動條默認最底部以及默認最右邊的示例代碼，代碼非常簡潔，具有很好的參考價值，希望對大家有所幫助2017-11-11
IE關(guān)閉時判斷及AJAX注銷案例學(xué)習(xí)
當(dāng)關(guān)閉系統(tǒng)時會提示:你確定要退出系統(tǒng)嗎？退出請按'離開此頁'接下來將講解下IE關(guān)閉判斷及AJAX注銷，感興趣的你可不要錯過了哈，希望本例對你學(xué)習(xí)ajax有所幫助2013-02-02
本篇文章主要介紹了js實現(xiàn)九宮格的隨機顏色跳轉(zhuǎn)的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了Java SE 9 多版本兼容 JAR 包示例,Java 9 版本中增強了Jar 包多版本字節(jié)碼文件格式支持，也就是說在同一個 Jar 包中我們可以包含多個 Java 版本的 class 文件，更多相關(guān)內(nèi)容感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了js中比較兩個對象是否相同的方法,結(jié)合實例形式詳細分析了js對象遍歷、判斷等相關(guān)操作技巧,需要的朋友可以參考下2019-09-09
這里給大家匯總了一些js實現(xiàn)刷新iframe框架的方法，非常的簡單實用，有需要的小伙伴可以參考下。2015-04-04
下面小編就為大家?guī)硪黄狫avaScript注入漏洞的原理及防范(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了JavaScript中計算網(wǎng)頁中某個元素的位置,本文先是講解了一些必要的知識和實現(xiàn)難點,然后給出實現(xiàn)代碼,需要的朋友可以參考下2015-06-06
uniapp?u-picker多列用法以及設(shè)置默認選中值
uview組件庫u-picker組件可能很多人不熟悉,下面這篇文章主要給大家介紹了關(guān)于uniapp?u-picker多列用法以及設(shè)置默認選中值的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06