更新记录
1.32(2020-04-01) 下载此版本
- 修复了官方2.68版本的bug
若出现json编译问题,不想重新下载此组件的,可以直接删除自定义组件refesh中 wxs里面的所有注释即可.
1.31(2020-03-18) 下载此版本
-
修复2.65hbx版本以前没有注册组件的问题
-
1.30版本以前的说明文档作废,请直接参考demo里的示例
1.30(2020-03-18) 下载此版本
此版本为终极版下拉刷新 ,封装了下拉刷新组件
使用方法请参考demo的示例
最简单 高性能的下拉刷新解决方案
- 组件->隐藏文字
- 组件->动态修改图片
- 组件->定义下拉刷新的高度
- 请查看demo示例
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
app-vue | × | × | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 |
---|---|---|---|
× | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | × | × | × | × | × | × | × | × |
一个基于wxs十分简单而且高性能的下拉刷新demo
现在插件市场很多下拉刷新组件,但使用场景和性能都不怎么理想,所以特定做了一个下拉刷新的组件
关于此demo
- 不涉及分页及触底等数据操作,只是单纯的下拉刷新
- 代码十分简单,方便开发者直接应用到业务当中
- 使用场景->列表上层只要有非原生的绝对定位组件就可以使用此下拉刷新(例如:自定义导航栏下实现下拉刷新)
- 并非封装成自定义组件,开发者只需要仿照此demo做一些简单的处理就可以应用到业务中
使用方法(此组件需要滚动是默认的页面滚动,如使用scroll view,请把生命周期中监听的页面滚动改成监听scroll滚动)
- 下拉刷新组件会隐藏在你的业务绝对定位的组件中,参考如下配置
...(你的绝对定位组件 如自定义导航栏)
<view @touchstart="test.touchstart" @touchmove="test.touchmove"
:change:prop="test.end" :prop="propValue"
@touchend="test.touchend" :data-top="scrollTop" id="refresh-container" >
<!-- 起始会隐藏在导航栏里 -->
<view class="flex-row-center" style="height: 你绝对定位组件的高度;width: 750rpx">
<!-- 旋转图标 -->
<view class="cuIcon-loading1" id="lot" style="font-size: 35rpx;color: #00CDCD;">
</view>
<!-- 提示文字 -->
<text class="my-neirong-sm padding-left" style="color: #9c9c9c;">{{refreshText}}</text>
</view>
...(你的其他的view)
</view>
- 若使用srcoll view 请删除下面,否则复制到你的页面中
onPageScroll(e) {
if(e.scrollTop<1){
<!-- 触顶 -->
this.scrollTop=0
}else{
// 只触发一次更新,提高性能
if(this.scrollTop!=1){
this.scrollTop=1
}
}
},
<!-- 此代码是为了监听页面是否触顶,如使用其它scroll view请自行判断是否触顶 -->
-
复制demo里的wxs代码 或者采取引入的方式
-
复制demo里vue中相关的方法与变量