微信小程序组件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为falsethis.DisableTrigger = falseuni.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为truethis.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)}},}

来源地址：https://blog.csdn.net/weixin_48585264/article/details/130822813