1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 微信小程序下拉刷新真机没效果_微信小程序 下拉刷新 上拉加载(示例代码)

微信小程序下拉刷新真机没效果_微信小程序 下拉刷新 上拉加载(示例代码)

时间:2018-08-30 23:00:38

相关推荐

微信小程序下拉刷新真机没效果_微信小程序 下拉刷新 上拉加载(示例代码)

1.下拉刷新

小程序页面集成了下拉功能,并提供了接口,我们只需要一些配置就可以拿到事件的回调。

1. 需要在 .json 文件中配置。 如果配置在app.json文件中,那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中,那么就是对应的页面,可以下拉刷新。

具体页面的.json文件:

1 {2 "enablePullDownRefresh": true3 }

app.json文件:

1 "window": {2 "enablePullDownRefresh": true3 }

2. 在js文件中添加回调函数

// 下拉刷新回调接口

onPullDownRefresh: function () {

// do somthing

},

3. 添加数据

通常情况下的下拉刷新操作,就是把查询条件重置,让页面显示最新的一页数据。下面是笔者demo中的下拉刷新回调接口的代码,同时也是一般情况下的操作流程。

1 // 下拉刷新回调接口2 onPullDownRefresh: function () {3 // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。4 // 刷新时需把total重置为0,代表重新从第一条请求。5 total = 0;6 // this.data.dataArray 是页面中绑定的数据源7 this.data.dataArray = [];8 // 网络请求,重新请求一遍数据9 this.periphery();10 // 小程序提供的api,通知页面停止下拉刷新效果11 wx.stopPullDownRefresh;12 },

2 .上拉加载

同下拉刷新一样,小程序中也提供了用于上拉时回调的接口。官方文档中并没有很详细的介绍,经测试发现,上拉回调的接口并不需要额外的配置(下拉时需要在 .json文件中配置 "enablePullDownRefresh": true),直接在页面滑动到底部时就能拿到回调。

1. 在js文件中添加回调函数

1 // 上拉加载回调接口2 onReachBottom: function () {3 // 我们用total和count来控制分页,total代表已请求数据的总数,count代表每次请求的个数。4 // 上拉时需把total在原来的基础上加上count,代表从count条后的数据开始请求。5 total += count;6 // 网络请求7 this.periphery();8 },

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。