# 搜索列表功能完善(上)
<template>
<view>
<template v-if="list.length>0">
<block v-for="(item, index) in list" :key="index">
<indexList :item="item" :index="index"></indexList>
</block>
<!-- 上啦加载 -->
<loadMore :loadtext="loadtext"></loadMore>
</template>
<template v-else-if="issearch && list.length<1">
<nothing></nothing>
</template>
</view>
</template>
<script>
import indexList from '../../components/index/index-list.vue'
import nothing from '../../components/common/no-thing.vue'
// 加载更多
import loadMore from '../../components/common/load-more.vue'
export default {
components: {
indexList,
nothing,
loadMore
},
data() {
return {
issearch: false,
loadtext: "上啦加载更多",
list: []
}
},
// 监听原生标题导航按钮点击事件(取消按钮)
onNavigationBarButtonTap(e) {
if (e.index === 0) {
uni.navigateBack({
delta: 1
})
}
},
// 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputChanged(e){
if(e.text) {
this.getData(e.text)
}
},
// 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputConfirmed(e){
if(e.text) {
this.getData(e.text)
}
},
// 监听页面触底事件
onReachBottom() {
this.loadmore()
},
methods: {
// 搜索事件
getData(val) {
uni.showLoading();
// 请求服务器 post keyword:val
setTimeout(()=>{
let arr = [
{
userpic: "../../static/demo/userpic/12.jpg",
username: "星城",
isguanzhu: false,
title: "我是标题",
type: "img", // img 图文, video: 视频
titlepic: "/static/demo/datapic/11.jpg",
infonum: {
index: 0, // 0: 没有操作, 1: 顶了 2:踩了
dingnum: 11,
cainum: 11
},
commentnum: 10,
sharenum: 10
},
{
userpic: "../../static/demo/userpic/12.jpg",
username: "星城",
isguanzhu: true,
title: "我是标题",
type: "video", // img 图文, video: 视频
titlepic: "/static/demo/datapic/11.jpg",
playnum: "20w",
long: "2.47",
infonum: {
index: 1, // 0: 没有操作, 1: 顶了 2:踩了
dingnum: 11,
cainum: 11
},
commentnum: 10,
sharenum: 10
}
]
this.list=arr
uni.hideLoading()
this.issearch = true
},1000)
},
// 上拉加载
loadmore() {
if (this.loadtext !== "上啦加载更多") {
return
}
// 修改状态
this.loadtext = "加载中。。。"
// 获取数据
setTimeout(() => {
// 获取完成
let obj = {
userpic: "../../static/demo/userpic/12.jpg",
username: "星城",
isguanzhu: true,
title: "我是标题",
type: "video", // img 图文, video: 视频
titlepic: "/static/demo/datapic/11.jpg",
playnum: "20w",
long: "2.47",
infonum: {
index: 1, // 0: 没有操作, 1: 顶了 2:踩了
dingnum: 11,
cainum: 11
},
commentnum: 10,
sharenum: 10
}
this.list.push(obj)
this.loadtext = "上啦加载更多"
}, 1000)
// this.loadtext = "没有更多数据了"
},
}
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
← 完善聊天页功能 搜索列表功能完善(下) →