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

 时间:2026-02-15 00:27:33

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', '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触底刷新

  • 膜性肾病之祛毒养肾汤
  • 艾条艾灸盒的使用方法,艾灸盒与艾灸条哪个好?
  • 生活中有什么变废为宝的小妙招
  • 如何开启阿基米德记忆播放
  • 做好凉拌菜的6大关键步骤
  • 热门搜索
    如何煮牛肉好吃 汽车图片大全 迈之灵片效果怎么样 婴儿早教方法 彭禺厶电影大全鬼片 开水烫伤起泡怎么处理 甲胎蛋白偏高怎么办 红烧鸡翅的家常做法 家常小菜 自述怎么写