05 搜索页开发（收起键盘事件，导航栏相关监听）
05 搜索页开发（收起键盘事件，导航栏相关监听）
一 搜索页面开发（上）
思路：
1 监听index.vue的搜索框点击事件。
2 定制点击事件跳转到（跳转使用uni.navigageTo）对应的搜索页面。
3 定制搜索页面的路由，以及导航条。
4 完成搜索页面的死数据。
1 监听index.vue的搜索框点击事件
注意该事件与onload事件同级别
关于监听点击原声搜索框链接：https://uniapp.dcloud.io/api/router?id=navigateto
关于跳转方法官网链接：https://uniapp.dcloud.io/api/router?id=navigateto
//监听原生标题栏按钮点击事件，参数为Object
onNavigationBarSearchInputClicked(){
uni.navigateTo({
url:'../search/search',
})
},
onLoad() {
uni.getSystemInfo({
success:res=>{
// 可用窗口高度（屏幕高度-导航栏高度-底部栏高度。） - 选项卡高度
this.scrollH = res.windowHeight - uni.upx2px(101)
// console.log(this.scrollH)
}
})
// 根据选项生成列表
this.getData()
},
2 定制点击事件跳转到对应的搜索页面。
上个标题已经包含了代码，所以略。
3 定制搜索页面的路由，以及导航条。
{
"path" : "pages/search/search",
"style" : {
"app-plus":{
//导航栏配置
"titleNView":{
"searchInput":{
"align":"center",
"backgroundColor":"#f5f5f2",
"borderRadius":"4px",
"placeholder":"搜索帖子",
"placeholderColor":"#6d6e66"
},
"buttons":[
{
"color":"#1e1e1e",
"colorPressed":"#FD597c",
"float":"right",
"fontSize":"14px",
"text":"搜索",
"margin-right":"10px"
}
]
}
}
4 完成搜索页面的死数据。
<template>
<view>
<!-- 搜索历史 -->
<view class="py-2 font-md px-2">搜索历史</view>
<view class="flex flex-wrap">
<view class="border rounded font mx-2 my-1 px-2"
v-for="(item,index) in list" :key="index"
hover-class="text-main">
{{item}}
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
list:['uni-app第二季商城类实战开发','uni-app第三季仿微信实战开发','实战教程','系列教程']
}
},
methods: {
}
}
</script>
<style>
</style>
二 搜索页面开发（下）
思路：
1 在标题一的基础上什么都没有动只编辑了search.vue页面
2 虚拟出来假数据。
3 监听点击原生导航搜索按钮 ，onNavigationBarButtonTap
4 编辑该事件onNavigationBarButtonTap ，并且添加需要被循环渲染的的虚拟数据，利用v-if 逻辑隐藏显示搜索历史。
5 为每个搜索历史绑定相同的事件，进行数据渲染。
小点：
下面代码涉及到了，加载提示框渲染，监听输入框内容变化，收起键盘控制。
<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-1 px-2"
v-for="(item,index) in list" :key="index"
hover-class="text-main"
@click="clickSearchHistory(item)">
{{item}}
</view>
</view>
</template>
<template v-else>
<!-- 数据列表 -->
<block v-for="(item,index) in searchList" :key="index">
<common-list :item="item" :index="index"></common-list>
</block>
</template>
</view>
</template>
<script>
// 测试数据
const demo = [{
username:"昵称",
userpic:"/static/default.jpg",
newstime:"2019-10-20 下午04:30",
isFollow:false,
title:"我是标题",
titlepic:"/static/demo/datapic/11.jpg",
support:{
type:"support", // 顶
support_count:1,
unsupport_count:2
},
comment_count:2,
share_num:2
},
{
username:"昵称",
userpic:"/static/default.jpg",
newstime:"2019-10-20 下午04:30",
isFollow:false,
title:"我是标题",
titlepic:"",
support:{
type:"unsupport", // 踩
support_count:1,
unsupport_count:2
},
comment_count:2,
share_num:2
},
{
username:"昵称",
userpic:"/static/default.jpg",
newstime:"2019-10-20 下午04:30",
isFollow:false,
title:"我是标题",
titlepic:"",
support:{
type:"", // 未操作
support_count:1,
unsupport_count:2
},
comment_count:2,
share_num:2
}];
import commonList from '@/components/common/common-list.vue';
export default {
components:{
commonList
},
data() {
return {
serarchText:"",
list:['uni-app第二季商城类实战开发','uni-app第三季仿微信实战开发','实战教程','系列教程'],
searchList:[]
}
},
// 监听导航栏输入,每当输入一次就会触发一次，监听原生标题栏搜索输入框输入内容变化事件。
onNavigationBarSearchInputChanged(e){
console.log(e)
this.serarchText = e.text
},
// 监听点击导航搜索按钮
onNavigationBarButtonTap(e){
if (e.index===0){
this.searchEvent()
}
},
methods: {
// 点击搜索历史
clickSearchHistory(text){
this.searchText = text
this.searchEvent()
},
// 搜索事件
searchEvent(){
// 收起键盘
uni.hideKeyboard()
// 显示loading状态
uni.showLoading({
title:'加载中',
mask:false
})
// 模拟网络io请求搜索
setTimeout(()=>{
// 渲染数据
this.searchList = demo
// 隐藏loading
uni.hideLoading()
console.log(this.searchList)
},2000)
}
}
}
</script>
<style>
</style>
