微信小程序使用onReachBottom触底刷新

2025-05-25 02:09:55

1、打开小程序开发工具,在项目的pages文件夹下新建mypage文件夹,并在文件夹内新建mypage,在app.json中将mypage设为第一页面

2、在mypage.wxml中写代码如下:<view wx:for="{{objlist}}">{{index}}-{{item}}</view>objlist是一个数组数据

微信小程序使用onReachBottom触底刷新

3、在mypage.js中写代码如下,添加数组数据:data: {objlist: [争犸禀淫'h', 'h', 'h', 'h&垆杪屑丝#39;, 'h', 'h', 'h', 'h','h', 'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h', 'h','h', 'h', 'h', 'h', 'h', 'h']},

微信小程序使用onReachBottom触底刷新

4、在mypage.js文件中的onReachBottom触底刷新函数中,添加代码如下,当到底部时添加一个数据到objlist数组onReachBottom: function () {var dataappend = this.data.objlist;dataappend.push('as');this.setData({objlist:dataappend})},

微信小程序使用onReachBottom触底刷新

5、编译运行代码,左侧模拟器效果如下图

微信小程序使用onReachBottom触底刷新

6、当上拉屏幕,滚动条触底时,触发onReachBottom事件,数据被添加并显示到屏幕了

微信小程序使用onReachBottom触底刷新

7、实际中往往是添加多个数据,可以改写onReachBottom函墙绅褡孛数如下:onReachBottom: function () {var dataappend = ['u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u', 'u'];this.setData({objlist:this.data.objlist.concat(dataappend)})},

8、编译运行代码,并上拉触底刷新,效果如下图

微信小程序使用onReachBottom触底刷新
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢