On the real iOS device, the scrolltolower event will be triggered multiple times when the scroll-view is scrolling. You can set a "loading flag" (such as DisableTrigger) to avoid repeated requests for the next page of data. The specific method is:
Add a DisableTrigger variable in data, which is used to identify whether the loading operation of the next page of data can be performed currently.
In the init() method, set DisableTrigger to false before requesting data, indicating that data is currently being loaded.
After the data request is successful, set DisableTrigger to true, indicating that the data loading has been completed.
In the onreachBottom method, judge whether DisableTrigger is true, if yes, load the next page of data, otherwise do nothing.
The following is the specific sample code:
<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)
}
},
}