微信小程序组件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>

<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)
				}
			},
		}