微信小程序scroll-view上拉加载更多

原创于 2022-08-09 21:47:08 发布 · 1k 阅读

CC 4.0 BY-SA版权

文章标签：

本文介绍如何在微信小程序中使用scroll-view组件实现上拉加载更多的功能。主要通过wxml中的scroll-view标签设置属性并绑定事件，配合js文件中的bindscrolltolower事件处理函数实现数据的动态加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序scroll-view上拉加载更多
1、wxml代码

<scroll-view class="scroll-view-container" 
   scroll-y
   bindscrolltolower ="bindscrolltolowerFn"
   scroll-top="{{scrollTop}}"
>

2、js代码

bindscrolltolowerFn: function(){
     // getStuList为请求服务端数据方法
            this.getStuList(）        
    }

3、需要注意的是当前页面最外层元素的样式里要加上overflow：scroll 或者 overflow-y: scroll 否则scroll-view上的方法不起作用