uniapp pc端和移动端列表上拉刷新加载分页

效果图：

tips: 实现了pc端和移动端兼容

代码实现：

html:

<view v-if="answerList.length >= 1" style="padding:30rpx 0;color:#888;text-align: center;">
	<view>{{loadMore}}</view>
</view>
1
2
3

data:

data() {
	return {
		pageNo: 1,
		pageSize: 10,
		totalCount: 0,
		loadMore: '上拉加载更多'
	}
}
1
2
3
4
5
6
7
8

// uniapp移动端触底生命周期
onReachBottom() {
	this.getList()
},
1
2
3
4

mounted() {
	// 判断当前是移动端还是pc端
	if (this.isMobile()) {
		console.log('移动端')
	} else {
		console.log('pc端')
		window.addEventListener('scroll', this.scrollBottom)
	}
			
},
methods: {
	isMobile() {
		let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
		return flag
	},
	// pc端触底方法
	scrollBottom() {
		// 变量scrollTop为当前页面的滚动条纵坐标位置
		 let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
		// 变量windowHeight 是可视区的高度
		 let windowHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
	    // 变量scrollHeight 是滚动条的总高度
	    let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
			
	    // 到底的条件
	    if (scrollTop + windowHeight >= scrollHeight - 100) {
	      // 到底后要触发的事件
	      console.log('pc端触底了');
	      this.getList()
	  }
	},
	getList() {
		if ((this.pageNo * this.pageSize) < this.totalCount) {
			this.loadMore = '正在加载中……'
			this.pageNo++
			this.keywordsSearch()
		} else {
			this.loadMore = '已无更多'
		}
	},
	// 调用后端接口拿到数据
	keywordsSearch() {
		const params = {
			keywords: this.search.searchValue,
			type: this.search.type,
			pageNo: this.pageNo,
			pageSize: this.pageSize
		}
		searchKeywords(params).then(res => {
			if (res.code == 200) {
				this.answerList = this.answerList.concat(res.result.records)
				this.totalCount = res.result.total
				if (this.pageNo == 1 && this.answerList.length < 10) {
					this.loadMore = '已无更多'
				}
			}
		})
	},
}
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