文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-09-06 09:14

关注

在 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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯