uniapp小程序之配置首頁搜索框功能的實現(xiàn)
本文效果圖：
??正文
注意：我們介紹一下本次開發(fā)使用的是
uniapp，本次分享內容的搜索框為禁止輸入搜索框，點擊跳轉專屬搜索頁面。
??1、查閱官網配置搜索框pages配置項
配置鏈接：uni-app官網 (dcloud.net.cn)
1.1 首先進入官網后找到如下內容
![]](http://img.jbzj.com/file_images/article/202209/2022090914182136.png)
1.2 如官網所示 style的說明如下，看圖操作
用于設置每個頁面的狀態(tài)欄、導航條、標題、窗口背景色等。
頁面中配置項會覆蓋 globalStyle 中相同的配置項.
1.3 跳轉指定的app-plus配置項
我們需要配置的是導航欄，所以選擇
titleNView屬性，根據自己的需求去選擇即可。
1.4 導航欄配置屬性如下，選擇我們需要的即可
??2、配置APP端與H5端搜索框（小程序端不兼容）
看了上面官網的截圖，細心的小伙伴應該發(fā)現(xiàn)了，我們所選的app-plus是兼容H5的但是不兼容小程序端，所以我們需要自己手動編寫小程序端的內容，詳情看下文。
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)按鈕顏色
}]
}
}
}
}
寫完上面的代碼我們可以看一下效果圖：
搜索框已經出現(xiàn)在我們首頁的頂部，是我們所預期的效果。
2.2 監(jiān)聽搜索框與按鈕的點擊事件
搜索框點擊事件與按鈕點擊事件
我們需要的就是上面兩個方法
onNavigationBarSearchInputClicked與onNavigationBarButtonTap
示例代碼如下：
<script>
export default {
data() {
return {
}
},
onLoad() {
},
// 監(jiān)聽原生搜索框的點擊事件
onNavigationBarSearchInputClicked() {
console.log("在這里指定我們的跳轉路徑")
/* uni.navigateTo({
url: 'pages/search/search'
}); */
},
// 監(jiān)聽原生標題欄按鈕的點擊事件
onNavigationBarButtonTap() {
console.log("監(jiān)聽到了原生標題欄按鈕的點擊事件");
},
methods: {
}
}
</script>
注意：
onNavigationBarSearchInputClicked方法只有在pages.json中的searchInput配置disabled為true時才會觸發(fā)我們可以在對應的方法內編寫相應的操作，例如點擊搜索框跳轉指定的搜索頁。
2.3 拓展知識：監(jiān)聽多個按鈕的點擊事件
細心的小伙伴能發(fā)現(xiàn)，官方文檔中的按鈕點擊事件按鈕是一個數組而不是單個的
那么監(jiān)聽多個按鈕的點擊事件我們應該怎么去區(qū)分我們點擊的是哪個按鈕呢？
給大家演示一下：
pages.json文件內容配置如下：
{
"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)聽原生標題欄按鈕的點擊事件
onNavigationBarButtonTap(e) {
if(e.text=='分類1'){
console.log('當前點擊的按鈕為分類1按鈕，可做相應操作')
}
if(e.text=='分類2'){
console.log('當前點擊的按鈕為分類2按鈕，可做相應操作')
}
// e 代表的是所點擊的按鈕之一，如果需要操作指定按鈕可以根據按鈕的index值或者text值去區(qū)分做出不同的響應操作
console.log(e);
console.log("監(jiān)聽到了原生標題欄按鈕的點擊事件" + e.text);
}
點擊其中一個按鈕e輸出結果如下，我們可以根據text屬性和index屬性去區(qū)分不同的按鈕去完成相應的操作。
{
"color": "#959FA0",
"colorPressed": "#333333",
"float": "left",
"fontSize": "14px",
"fontWeight": "normal",
"index": 1,
"text": "分類2"
}
APP 和 H5效果如下：
??3、配置微信小程序搜索框
上文寫到的我們配置的
app-plus是不適配小程序端的，所以我們需要自己去手寫一個搜索導航欄。示例代碼中的class類中的類名樣式是我已經在全局配置好的，由于篇幅比較長，之后的小程序文章也會經常使用，點擊鏈接跳轉下載可查看相對應的樣式。
示例代碼如下：
<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>點擊搜索框跳轉專屬搜索頁面</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("在這里指定我們的跳轉路徑")
/* uni.navigateTo({
url: 'pages/search/search'
}); */
},
// 監(jiān)聽原生標題欄按鈕的點擊事件
onNavigationBarButtonTap() {
console.log("監(jiān)聽到了原生標題欄按鈕的點擊事件" + e.text);
},
methods: {
GoSearch() {
console.log("跳轉到搜索頁");
},
classify() {
console.log('點擊了分類按鈕');
}
}
}
</script>
微信小程序端效果圖如下，自定義方法也是比較簡單的：
到這里我們的搜索導航欄配置三端完畢啦，期待大家的交流指點
到此這篇關于uniapp小程序之配置首頁搜索框的文章就介紹到這了,更多相關uniapp搜索框內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
微信小程序彈窗是小程序在需要提示用戶的時候,顯示的一種交互形式,下面這篇文章主要給大家介紹了關于微信小程序四種彈窗方式的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06
實現(xiàn)div滾動條默認最底部以及默認最右邊的示例代碼
下面小編就為大家分享一篇實現(xiàn)div滾動條默認最底部以及默認最右邊的示例代碼，代碼非常簡潔，具有很好的參考價值，希望對大家有所幫助2017-11-11
當關閉系統(tǒng)時會提示:你確定要退出系統(tǒng)嗎？退出請按'離開此頁'接下來將講解下IE關閉判斷及AJAX注銷，感興趣的你可不要錯過了哈，希望本例對你學習ajax有所幫助2013-02-02
本篇文章主要介紹了js實現(xiàn)九宮格的隨機顏色跳轉的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了Java SE 9 多版本兼容 JAR 包示例,Java 9 版本中增強了Jar 包多版本字節(jié)碼文件格式支持，也就是說在同一個 Jar 包中我們可以包含多個 Java 版本的 class 文件，更多相關內容感興趣的小伙伴可以參考一下2022-08-08
這篇文章主要介紹了js中比較兩個對象是否相同的方法,結合實例形式詳細分析了js對象遍歷、判斷等相關操作技巧,需要的朋友可以參考下2019-09-09
這里給大家匯總了一些js實現(xiàn)刷新iframe框架的方法，非常的簡單實用，有需要的小伙伴可以參考下。2015-04-04
下面小編就為大家?guī)硪黄狫avaScript注入漏洞的原理及防范(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
這篇文章主要介紹了JavaScript中計算網頁中某個元素的位置,本文先是講解了一些必要的知識和實現(xiàn)難點,然后給出實現(xiàn)代碼,需要的朋友可以參考下2015-06-06
uview組件庫u-picker組件可能很多人不熟悉,下面這篇文章主要給大家介紹了關于uniapp?u-picker多列用法以及設置默認選中值的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-06-06