微信小程序如何实现下拉刷新上滑加载

2021-02-21 分类：微信小程序

微信小程序是可以做到下拉刷新的，使用的函数是：onPullDownRefresh，要想下拉刷新什么数据，只需要在这个函数里面写入被刷新的函数即可。

但是有一点需要说明，这个下拉刷新并不是默认开启的，即便已经好定义了onPullDownRefresh，那么这个开关在什么地方呢？这就需要我们设置需要刷新页面的json里面配置一个参数："enablePullDownRefresh": true，配置了这个参数的下拉页面才会生效。

在微信小程序里面其实是没有分页控件的，也就不能像网页一样点击页面跳转到某一页。这时我们需要使用上滑加载来实现一页一页的加载，当我们的内容到了底部以后，就会加载第二页的内容。那么这个上滑加载是如何实现的呢？

这里我们只介绍重点：1.设置初始加载函数初始加载函数的意思就是，当页面进来显示的时候，要显示一页的内容，这一项是必须的。2.配置onReadBottom函数配置触发小程序到底后加载数据，这里我们需要一个初始页码，每次到达页面底部以后，页码加1，

this.data.currentPage = this.data.currentPage + 1;

结果运用concat函数进行拼接：

that.setData({

items: that.data.items.concat(JSON.parse(res.data[0].list))

})

这样，我们在将页码传入后台进行数据分页查询，就可以实现分页加载了。

结语

在写代码的时候，有的时候用this，有的时候用var that=this;在wx.request里面的用that，外面的用this，这一点需要大家特别留意。

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有微信小程序等

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容