uniapp下拉刷新和上拉加载更多

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
<template>
	<!-- 下拉刷新和上拉加载更多模板 uniapp 作者@cy -->
	<view class="load_more">
		<div style="background-color: antiquewhite;text-align: center;font-size: 24rpx; color: gray;">下拉刷新数据</div>
		<div v-for="item in dataList" style="height: 280rpx;border-bottom: 1px solid red;">
			{{item.id}}
		</div>
		<uni-load-more :status="status" :icon-size="14" :content-text="contentText" v-if="dataList.length > 0" />
	</view>

</template>

<script>
	import {
		getDataList
	} from '@/api/product'

	export default {
		data() {
			return {
				dataList: [
					{
						id: 1
					},
					{
						id: 1
					},{
						id: 1
					},{
						id: 1
					},{
						id: 1
					},{
						id: 1
					},{
						id: 1
					}
				],
				totalCount: 14, //接口请求到的数据量(展示数据用页码形式)，
				params:{
					curretPage: 0, //页码
					pageSize: 10 //页大小
				},
				reload: false, //刷新标志符
				status: 'more',
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的~'
				},
			}
		},
		onLoad(){
			
		},
		onPullDownRefresh() {
			//初始化信息
            this.dataList = []
			this.params.curretPage = 0,
			this.pageSize = 10
			this.reload = true
			setTimeout(() => {
				this.getData()
			}, 1000)
		},
		onReachBottom() {
			if (this.totalCount > this.dataList.length) {
				this.status = 'loading';
				setTimeout(() => {
					this.getData(); //执行的方法
				}, 1000) //这里我是延迟一秒在加载方法有个loading效果，如果接口请求慢的话可以去掉
			} else { //停止加载
				this.status = 'noMore'
			}
		},
		methods: {
			getData(){
				// getDataList({
				// 	page: this.params.curretPage+1, //请求页码每次＋1
				// 	pageSize: this.params.pageSize
				// }).then(res => {
				// 	this.totalCount = res.total
				// 	if (res.total > 0) {
				// 		const dataMap = result.data.list
				// 		this.dataList = this.reload ? dataMap : this.dataList.concat(dataMap);
				// 		this.reload = false;
				//		this.status = 'more'
				// 	} else {
				// 		this.dataList = [];
				// 	}
				// 	if (this.totalCount == this.dataList.length) {
				// 		this.reload = false;
				// 		this.status = 'noMore'
				// 	}
				// })
				let mockData = [
					{
						id:2
					},
					{
						id:2
					}
				]
				this.dataList = this.dataList.concat(mockData)
				this.status = 'more'
				console.log(this.dataList,23333)
				uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.load_more{
		height: 100%;
	}
</style>

1
2
3
4
5
6
7
8
9
10
{
			"path": "pages/test/scrollTab",
			"style": {
				"navigationBarTitleText": "scrollTabTest",
				"disableScroll": true,
				"app-plus": {
					"bounce": "none"
				}
			}
		},