功能描述：点击导航栏跳转到搜索页，并在搜索页完成数据检索，数据渲染
1.监听index.vue的搜索框
代码语言：javascript复制//监听点击导航栏搜索框
onNavigationBarSearchInputClicked(){
//跳转搜索页面
uni.navigateTo({
url:'../search/search'
})
},2.新键搜索页面search.vue
代码语言：javascript复制<template>
<view>
<template v-if="searchList.length===0">
<!-- 搜索历史 -->
<view class="py-2 font-md px-2">搜索历史</view>
<view class="flex flex-wrap">
<!-- 历史记录 -->
<view class="border rounded font mx-2 my-10 px-2"
v-for="item,index in list"
:key="index"
hover-class="bg-light"
@click="clickSearchHistory(item)">{{item}}</view>
</view>
</template>
<!-- 数据列表 -->
<block v-for="item,index in searchList" :key="index">
<commonList :item="item" :index="index"></commonList>
</block>
</view>
</template>我们在历史记录元素添加了click事件，这个事件触发历史记录函数完成历史搜索，下文展示。
3.配置pages.json
代码语言：javascript复制{
"path" : "pages/search/search",
"style" : {
//导航配置
"app-plus":{
"titleNView":{
//搜索框
"searchInput":{
"align":"center",
"backgroundColor":"#f5f4f2",
"borderRadius":"4px",
"disabled":false,
"placeholder":"搜索帖子"
},
"buttons":[
{
"color":"#333333",
"colorPressed":"#fd597c",
"float":"right",
"fontSize":"14px",
"text":"搜索"
}
]
}
}
}
}搜索相关
代码语言：javascript复制<script>
import demo from '@/newsdata.js'//导入新闻数据
import commonList from "@/components/common/common-list.vue"
export default {
components:{commonList},
data() {
return {
searchText:"",
list:['测试历史','211321','程序员']
//搜索结果
searchList:[]
}
},
//监听导航输入
onNavigationBarSearchInputChanged(e){
// console.log(e)
this.searchText=e.text
},
//监听导航搜索按钮
onNavigationBarButtonTap(e){
//如果索引==0表示搜索按钮点击
if(e.index==0)this.searchEvent()
},
methods: {
//点击搜索历史
clickSearchHistory(text){
this.searchText = text//获取历史记录
this.searchEvent()//调用搜索事件
},
searchEvent(){
//收起键盘
uni.hideKeyboard()
// //请求搜索
//loading
uni.showLoading({
title: '加载中...',
mask: false
});
setTimeout(()=>{
this.searchList = demo
//隐藏loading
uni.hideLoading()
},3000)
console.log(this.searchList)
}
}
}
</script>
