微信小程序定制页面局部上拉刷新及加载列表

如标题所示,由于微信小程序目前仅支持整体页面刷新及加载,有某些具体特殊需求的页面中是无法满足的,因此有了定制化的局部下拉刷新及上拉加载列表,思路如下:

下拉刷新会有5种状态嘛:

reset: 重置初始状态

pulling: 下拉过程

pullEnough: 下拉距离判断

refreshing: 释放正在刷新

refreshed: 刷新完成

有了这些状态之后,再考虑在微信小程序当中,局部滚动使用

<scroll-view></scroll-view>这个控件呢,需要注意的是初始化得有个高度 height,一般情况下,这个高取自小程序

wx.getSystemInfo(),通过页面减去页面除滚动区域外的高度,剩于高度即可,设置纵向滚动为true,然后,绑定滚动事件,实现 

监听纵向页面卷去的高度scrollTop,用于动态修改下拉刷新的状态值,根据状态值,UI层不同展示,下拉刷新的事件需要在scroll-view绑定手指的触摸事件,主要是touchStart, touchMove,获取到初始值,滑动的值,与scrollTop值作对比计算,实现下拉刷新的功能

上拉加载直接就绑定touchEnd即可,在允许上拉加载的情况下

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值