6.上拉和下拉刷新
下拉刷新
- 创建页面list/list.vue：
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
| <template>
<view>
<view v-for="item in list" class="box-item">{{ item }}</view>
</view>
</template>
<script>
export default {
data() {
return {
list: ['Java', 'C++', 'Python', 'Javascript', 'C#']
}
}
}
</script>
<style>
.box-item {
height: 100px;
line-height: 100px;
}
</style>
|
- 在pages.json中配置路由并开启下拉刷新：
1
2
3
4
5
6
7
8
9
10
11
| {
"path": "pages/list/list",
"style": {
"enablePullDownRefresh": true
}
}
|
- 在list.vue中增加下拉刷新函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
| onPullDownRefresh() {
console.log('下拉刷新');
setTimeout(() => {
this.list = this.list.sort();
uni.stopPullDownRefresh();
}, 2000);
}
|
- 增加按钮，手动刷新：
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
| <template>
......
<button @click="refresh">刷新</button>
</template>
<script>
export default {
......
methods: {
refresh() {
uni.startPullDownRefresh();
}
}
}
</script>
|
上拉加载
- 在pages.json中设置触底距离：
1
| onReachBottomDistance: 200 // 200代表距离页面底部200px
|
- 增加刷新逻辑:
1
2
3
4
5
6
7
| onReachBottom() {
console.log('触底了');
this.list = [...this.list, ..this.list];
}
|
参考：
18-下拉刷新的学习
19-上拉加载