微信小程序组件scroll-view滚动到底部多次触发加载如何解决？_小程序 底部触发

在 iOS 真机上，scroll-view 滚动时会多次触发 scrolltolower 事件的问题，可以设置一个“加载标识”（如 DisableTrigger）来避免重复请求下一页数据。具体做法为：

在 data 中新增一个 DisableTrigger 变量，用于标识当前是否可以执行下一页数据的加载操作。

在 init()方法中，在请求数据前将 DisableTrigger 设置为 false，表示当前正在加载数据。

在请求数据成功后，将 DisableTrigger 设置为 true，表示当前已经完成数据加载。

在 onreachBottom 方法中，判断 DisableTrigger 是否为 true，如果是，则执行下一页数据的加载，否则不做任何操作。

以下是具体的示例代码：

<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onreachBottom">
  <view class="panel-item " v-for="item in rankList" :key="item.id">
	 <view> </view>
  </view>
</scroll-view>
1
2
3
4
5

<script>
	export default {
		data() {
			return {
				rankList: [],
				page: 1,
				total: 1,
				DisableTrigger:true //标识
			};
		},
		onShow() {
			if (this.$store.state.token) {
				this.init()
			} else {
				this.$to('login')
			}
		},
		methods: {
			async init(page = 1) {
				this.page = page
				//加载前设置DisableTrigger为false
				this.DisableTrigger = false
				uni.showLoading({
					mask: true
				})
				//请求接口数据
				let res = await api.getRank({
					page: this.page,
				});
				if (res.errCode == 0) {
					this.total = res.data.totalPage;
					let list = res.data.list;
					if (this.page == 1) {
						this.rankList = list
					} else {
						this.rankList = this.rankList.concat(list);
					}
					//接口加载成功返回数据后DisableTrigger为true
					this.DisableTrigger = true
				} else if (res.errCode != 2 && res.errCode != 3) {
					this.$toast(res.msg)
				}
				uni.hideLoading()
			},
			onreachBottom() {
			    //利用DisableTrigger标识设置判断，防止多次触发请求接口。
				if (this.page < this.total && this.DisableTrigger) {
					this.init(this.page + 1)
				}
			},
		}
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