更新记录
1.32(2020-04-01)
若出现json编译问题,不想重新下载此组件的,可以直接删除自定义组件refesh中 wxs里面的所有注释即可.
1.31(2020-03-18)
1.30(2020-03-18)
此版本为终极版下拉刷新 ,封装了下拉刷新组件
使用方法请参考demo的示例
最简单 高性能的下拉刷新解决方案
- 组件->隐藏文字
- 组件->动态修改图片
- 组件->定义下拉刷新的高度
- 请查看demo示例
查看更多
平台兼容性
uni-app
app-vue |
app-nvue |
app-android |
app-ios |
? |
? |
? |
? |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
? |
? |
? |
? |
? |
? |
? |
? |
? |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
? |
? |
? |
? |
? |
? |
? |
? |
? |
uni-app x
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中相关的方法与变量