1、跳轉到搜索頁面功能

點擊搜索跳轉，顯示熱門搜索和，搜索歷史

結果如下所示

1、創建搜索頁search.vue
配置pages.json頁面配置app-plus導航搜索頁面(這個只針對h5和APP有用)

{"path": "pages/search/search","style": {"navigationBarTitleText": "","app-plus": {"bounce": "none", //關閉回彈效果"titleNView": {"softinputNavBar":"none","autoBackButton": false, //隱藏左側后退按鈕（APP） "searchInput": {"align": "left","placeholder": "搜索你想要的內容","borderRadius": "30rpx","backgroundColor": "#f0f1f2"},"buttons": [{"float": "right","text": "取消","fontSize": "16","color": "#2A333B"}]}}}

效果如下所示

2、小程序從index.vue跳轉到search.vue的方法

在首頁index.vue中的添加 @click.native=“navTo(’/pages/search/search’)”

<template><view ><!-- #ifdef MP --><!-- 搜索框在小程序中顯示 --><search-input @click.native="navTo('/pages/search/search')"></search-input><!-- #endif --></view> </template>

3、App跳轉到search.vue的方法
onNavigationBarSearchInputClicked這個是App端監聽輸入框被點擊時候觸發的方法，直接在index.vue下面添加，與methods同級

// this.navTo因為mixin.js在main.js中全局引入// 采用this 因為是在當前的Vue實例里面的onNavigationBarSearchInputClicked() {// console.log("-------")// uni.navigateTo({// url:'/pages/search/search'// })this.navTo('/pages/search/search')},

navTo是全局引入的方法

navTo(url, options={}){if(!url){return;}if(options.login && !this.$store.getters.hasLogin){url = '/pages/auth/login';}uni.navigateTo({url})},

4、在在category.vue 分類頁面進入搜索頁面的方法

onNavigationBarButtonTap監聽原生導航按鈕點擊的方法

// 監聽原生導航按鈕事件 onNavigationBarButtonTap(e) {// 搜索按鈕if(e.index === 0) {// 在 /common/mixin/mixin.js 中定義了this.navTo('/pages/search/search')} },`

5、category.vue 標簽名進入搜索頁面，methods 選項的 clickLabel 實現跳轉

// 點擊標簽,跳轉搜索頁面 clickLabel(item) { // 注意：labelId放到第1個位置，后面解析時要用，順序一定不能亂 // activeIndex 選中分類下標，方便父組件重新選擇分類時，默認選中當前分類const params = { labelId: item.id, name: item.name, activeIndex:this.activeIndex}uni.navigateTo({url: `/pages/search/search?params=${ JSON.stringify(params) }`}) }

2、在search.vue加載頁面onload中接收參數，如果傳遞過來有值，說明來自

沒有值說明來自index輸入框或者查詢按鈕，則需要獲取焦點

onLoad(option) {// #ifdef APP-PLUS//此對象相當于html5plus里的plus.webview.currentWebview()。在uni-app里vue頁面直接使用 plus.webview.currentWebview()無效，非v3編譯模式使用this.$mp.page.$getAppWebview()currentWebview = this.$scope.$getAppWebview();// #endif// 如果有參數則不用自動獲取焦點if (option.param) {console.log("option", JSON.parse(option.param))this.param = JSON.parse(option.param)this.doSearch()}// 沒有參數則自動獲取焦點 else {// #ifdef APP-PLUSconsole.log("自動獲取焦點")currentWebview.setTitleNViewSearchInputFocus(true)// #endif// #ifdef MP// 小程序獲取焦點this.focus = true// #endif}},

3、兼容小程序搜索框

創建官方提供的模板項目，點擊HuilderX菜單欄的：文件》新建》項目，打開新建項目窗口，如下操作：

拷貝 hello-uni-app 項目中的 /components/uni-search-bar/uni-search-bar.vue 搜索組件到我們項目中。

將 uni-search-bar.vue 圖標相關的注釋掉，替換 text 標簽以類名方式引入對應圖標，可在 css 中將邊框去
除和高度調整。

在 search.vue 中引用 uni-search-bar.vue 組件
注意：
如果組件是在 /components 目錄下，且 /components 的子目錄名和組件名相同時，可以不需要
import 導入它。
如上面 uni-search-bar.vue 目錄結構即可省略 import ，直接在模板代碼中使用這個組件即可。
doSearch(obj)方法，添加 obj 參數，接收一個輸入框的數據對象 {value: ‘xxxx’}

下面的就是小程序顯示的搜索框和取消

<template> <view class="search-container"> <!-- #ifdef MP --><!-- 小程序搜索框, 不要少了 ref="searchBar" 后面要用 --><!-- 注意：navBack() 不要少了括號，不然后退不了（mixin.js定義了） --><uni-search-bar ref="searchBar" radius="100" placeholder="搜索你想要的內容"clearButton="auto"cancelButton="always" @confirm="doSearch" @cancel="navBack()" /> <!-- #endif --> </view> </template>

小程序uni-search-bar 采用this.$emit方式向父組件傳遞輸入框的值

this.$emit("confirm", {value: this.searchVal })

@confirm="doSearch"調用父組件doSearch的方法

<script>// 當前頁面實例變量，聲明外面提高性能let currentWebview = nullexport default {data() {return {params: null, // 其他頁面跳轉到此頁面帶上的參數,content: null, //搜索內容}},//...,methods() {// 搜索doSearch(obj) {// obj有數據，則獲取this.content = obj && obj.value ? obj.value : this.contentconsole.log(this.content)uni.showLoading()},},} </script>

4、小程序搜索框自動獲取焦點

小程序進入搜索頁面，搜索框自動獲取焦點。
實現此功能，要在 uni-search-bar.vue 的 props 聲明 focus 屬性，并添加針對 focus 添加一個監聽器來設
置焦點

props: {focus: { // 是否獲取焦點 +++type: Boolean,default: false},},watch: {// 設置焦點 ++++focus: {handler(newVal) {if (newVal) {// 獲取焦點，this.searchClick()}},immediate: true},},

修改 search.vue 頁面中的傳遞獲取焦點屬性: focus = “focus”，data 選項中聲明 focus 屬性， onLoad賦值中賦值true真機預覽才有效果…
當onload 沒有參數則ifdef MP中小程序判斷，設置focus為true觸發焦點

<template> </template> <!-- focus 是否獲取焦點 --> <uni-search-bar :focus="focus" radius="100" placeholder="搜索你想要的內容" clearButton="auto" cancelButton="always" @confirm="doSearch"@cancel="navBack()" /><script>data() {return {params: null, // 其他頁面跳轉到此頁面帶上的參數,content: null, //搜索內容focus: false, //搜索框獲取焦點}},onLoad(option) { // option接收其他頁面傳遞過來的參數// #ifdef APP-PLUScurrentWebview = this.$mp.page.$getAppWebview()// #endif// 獲取其他頁面跳轉過來帶的參數，if (option.params) {// 轉換對象this.params = JSON.parse(option.params)console.log('params', this.params)// 有參數，則開始搜索this.doSearch()} else {// #ifdef APP-PLUS//點擊搜索框獲取焦點, 因為分類頁會跳轉到此頁面后不用獲取焦點，所以不在pages.json中開啟自動獲取焦點currentWebview.setTitleNViewSearchInputFocus(true)熱門與歷史關鍵字提示組件1. 需求： 進入搜索頁面后， 顯示熱門搜索和歷史搜索關鍵字， 帶歷史搜索帶清空按鈕， 如下圖2. 創建 / pages / search / components / keyword.vue 關鍵詞頁面， 其中模板代碼如下// #endif// #ifdef MP// 頁面加載即獲取焦點，真機測試才有效 +++this.focus = true// #endif}}, </script><style> </style>

總結

以上是生活随笔為你收集整理的uniApp学习(8)搜索框的创建和自动获取焦点的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。