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

微信小程序是可以做到下拉刷新的,使用的函数是: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,这一点需要大家特别留意。

声明:本站发布的内容以原创、转载、分享网络内容为主,如有侵权,请联系电话:021-51697771-8029,邮箱:mj@cndns.com ,我们将会在第一时间删除。文章观点不代表本站立场,如需处理请联系我们。

热门TAG

热门视频