文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

小程序怎么实现上拉加载scroll-view组件

2023-06-26 08:26

关注

这篇文章主要介绍“小程序怎么实现上拉加载scroll-view组件”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“小程序怎么实现上拉加载scroll-view组件”文章能帮助大家解决问题。

根据官方文档得知,scroll-view就是里面内容有各种滑动触发事件的p容器,比如滚动条滚动、触底、触顶着三个事件。

其中的三个属性  scroll-top:设置滚动条的位置

,scroll-y:是否允许竖向滑动,height:是组件的高度

Bindscrolltolower是绑定触底触发的事件

Bindscroll  是滚动触发的时间

Bindscrolltoupper  触顶触发的事件,由于是触顶触发事件,所以不合适用来当做下拉刷新

一般来说  对于组件的属性,都是通过JS来动态控制的。

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">

    这里面可以加一些loading 组件 和 需要遍历的数据

</scroll-view>

这里面我们要用到的就是 Bindscrolltolower 事件 来实现我们的 上拉加载。

下面我们来说说如何实现:

首先我们需要把 page 页码设置为全局变量  let page

然后再 bindDownLoad 函数里面进行 page++ 的赋值

bindDownLoad:function(){

    page++

    wx.request({

        //这里面的东西就不详细说了 大家应该能在API中找到

        主要说一下 在我们成功的获取到data 的时候 需要我们在success 成功回调里面去动态的push 我们所获取到的新的

        data  然后 setData 给我们 的dataList 这样就不会出现每次加载完成都是新数据而旧数据被销毁的情况。

        还有一点需要注意的就是当数据获取到最后一条数据以后 需要 进行一个if 判断 或者 switch 判断

    })

}

关于“小程序怎么实现上拉加载scroll-view组件”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网行业资讯频道,小编每天都会为大家更新不同的知识点。

阅读原文内容投诉

免责声明:

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

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

软考中级精品资料免费领

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

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

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

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

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

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

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