在 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