微信小程序自定义下拉刷新

哈喽,大家好, 微信小程序出来也有好几年了,大部分项目下拉刷新都用的系统自带的,用起来非常方便,有个缺点就是它的样式被微信锁定了,如果想在下拉不同状态显示不同文字就不怎么方便了,最近公司需求,写了一个带文本提示的下拉刷新组件。回到正题上来,请看标题,木错,我们今天就要讲解一下自定义下拉刷新。

实现下拉刷新系统API有两种方式
1. 调用系统的API,系统有提供下拉刷新的API接口
2. 监听scroll-view,自定义下拉刷新,还记得scroll-view里面有一个bindscrolltoupper属性吗?忘记请自行回顾上一篇 微信小程序实战篇-电商(二)当滚动到顶部/左边,会触发 scrolltoupper 事件,所以我们可以利用这个属性,来实现下拉刷新功能。

自定义下拉刷新效果
这里写图片描述

使用方法(实现原理直接看源代码):
1. 拷贝组件
这里写图片描述
3. 使用组件
3.1 json文件引用自定义组件
这里写图片描述
3.2 xml文件在顶部编写组件
这里写图片描述
4. 绑定滑动事件
4.1 设置样式 保证page和第一个容器能填充整个屏幕
这里写图片描述
4.2 绑定触摸,滚动,刷新,状态等事件
这里写图片描述
记住在刷新完成回调:this.refreshView.stopPullRefresh();
记住在刷新完成回调:this.refreshView.stopPullRefresh();
记住在刷新完成回调:this.refreshView.stopPullRefresh();
修改样式

textColor:下拉刷新提示文本颜色
backgroundColor: 背景颜色
大家也可以在自定义组件里面增加一些其他样式的属性,方便扩展。

源码地址

总结
今天就讲到这里,下拉刷新前端程序必备的知识,几乎所有APP里都有下拉刷新,所以大家一定要掌握,这里主要讲解的是我们自带的下拉刷新组件使用方法,大家可以试着在自己项目里使用使用,实现一下~

猜你喜欢

转载自blog.csdn.net/qq_19707091/article/details/80929449