16 搜索列表功能（組件復用思想，多種導航條跳轉）
一 編輯三處跳轉事件
1 pages/index/index.vue（原生導航欄）
//監聽原生標題欄按鈕點擊事件，參數為Object
onNavigationBarSearchInputClicked(){
uni.navigateTo({
url:'../search/search?type?post',
})
},
2 pages/news/news.vue (在標簽上自定跳轉事件)
...
<!-- 搜索框 -->
<view class="p-2" @click="openSearch">
<view class="rounded w-100 flex align-center justify-center py-2" style="background-color: #F1F1F1;">
<text class="iconfont icon-sousuo"></text>
搜索話題
</view>
</view>
...
openSearch(){
uni.navigateTo({
url:'../search/search?type=topic'
})
},
3 pages/user-list/user-list.vue(原生導航欄)
// 監聽點擊輸入框事件
onNavigationBarSearchInputClicked() {
uni.navigateTo({
url: '../search/search?type=user',
});
},
二 pages/search/search.vue（搜索占位符）
具體實現了：
1 不同頁面搜索功能都跳轉到了搜索組件
2 同一個搜索組件，根據type進行邏輯控制，渲染搜索占位+搜索內容
精華片段：
// 修改搜索占位
// #ifdef APP-PLUS
let currentWebview = this.$mp.page.$getAppWebview();
let tn = currentWebview.getStyle().titleNView;
tn.searchInput.placeholder = '搜索'+pageTitle;
currentWebview.setStyle({
titleNView: tn
})
// #endif
上代碼：
<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="bg-light"
@click="clickSearchHistory(item)">{{item}}</view>
</view>
</template>
<template v-else>
<!-- 數據列表 -->
<block v-for="(item,index) in searchList" :key="index">
<template v-if="type ==='post'">
<!-- 帖子 -->
<common-list :item="item" :index="index"></common-list>
</template>
<template v-else-if="type === 'topic'">
<!-- 話題 -->
<topic-list :item="item" :index="index"></topic-list>
</template>
<template v-else>
<!-- 用戶 -->
<user-list :item="item" :index="index"></user-list>
</template>
</block>
</template>
</view>
</template>
<script>
// 測試數據
const demo1 = [{
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
}];
const demo2 = [{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
},{
cover:"/static/demo/topicpic/1.jpeg",
title:"話題名稱",
desc:"話題描述",
today_count:0,
news_count:10
}];
const demo3 = [{
avatar:"/static/default.jpg",
username:"昵稱",
sex:1, // 0未知，1女性，2男性
age:24,
isFollow:true
},{
avatar:"/static/default.jpg",
username:"昵稱",
sex:2, // 0未知，1女性，2男性
age:24,
isFollow:false
}];
import commonList from '@/components/common/common-list.vue';
import topicList from '@/components/news/topic-list.vue';
import userList from '@/components/user-list/user-list.vue';
export default {
components: {
commonList,
topicList,
userList
},
data() {
return {
searchText:"",
list:['uni-app第二季商城類實戰開發','uni-app第三季仿微信實戰開發','實戰教程','系列教程'],
// 搜索結果
searchList:[],
// 當前搜索類型
type:"post"
}
},
// 監聽導航輸入
onNavigationBarSearchInputChanged(e){
this.searchText = e.text
},
// 監聽點擊導航搜索按鈕
onNavigationBarButtonTap(e) {
if (e.index === 0) {
this.searchEvent()
}
},
onLoad(e) {
if (e.type) {
this.type = e.type
}
let pageTitle = '帖子'
switch (this.type){
case 'post':
pageTitle = '帖子'
break;
case 'topic':
pageTitle = '話題'
break;
case 'user':
pageTitle = '用戶'
break;
}
// 修改搜索占位
// #ifdef APP-PLUS
let currentWebview = this.$mp.page.$getAppWebview();
let tn = currentWebview.getStyle().titleNView;
tn.searchInput.placeholder = '搜索'+pageTitle;
currentWebview.setStyle({
titleNView: tn
})
// #endif
},
methods: {
// 點擊搜索歷史
clickSearchHistory(text){
this.searchText = text
this.searchEvent()
},
// 搜索事件
searchEvent(){
// 收起鍵盤
uni.hideKeyboard()
// 顯示loading狀態
uni.showLoading({
title: '加載中...',
mask: false
})
// 請求搜索
setTimeout(()=>{
switch (this.type){
case 'post':
this.searchList = demo1
break;
case 'topic':
this.searchList = demo2
break;
case 'user':
this.searchList = demo3
break;
}
// 隱藏loading
uni.hideLoading()
},3000)
}
}
}
</script>
<style>
</style>