更新记录
1.3.2(2020-06-11) 下载此版本
合并dom元素
1.3.1(2020-06-11) 下载此版本
加入上拉加载;简化代码量;
1.3(2020-06-11) 下载此版本
减少不必要的控制字段;
添加上拉加载功能;
/
@dropOpen="dropOpen" 触发下拉刷新
@pullOpen="pullOpen" 触发上拉加载
:drop="true" true开启下拉,false关闭下拉
:pull="true" true开启上拉,false关闭上拉
/
注意:代码很简单,想实现别的功能,可以自己添加一些代码,css使用了stylus,代码量不大,可以自己改成css写法。
平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
- | - | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
- | - | - | - | - | - | - | - | - | - | - |
<template>
<view id="entry" class="flex_col_t">
<view class="main">
<refresh ref="refresh" @dropOpen="dropOpen" @pullOpen="pullOpen" :drop="true" :pull="true">
<view v-for="(v, i) in 100" :key="i" style="width: 100%;height: 100rpx;background: pink;">{{ i }}</view>
</refresh>
</view>
</view>
</template>
/*
@dropOpen="dropOpen" 触发下拉刷新
@pullOpen="pullOpen" 触发上拉加载
:drop="true" true开启下拉,false关闭下拉
:pull="true" true开启上拉,false关闭上拉
*/
import refresh from '../../templates/refresh/refresh.vue';
export default {
methods: {
dropOpen(next) { // 下拉刷新触发方法
console.log('下拉刷新');
setTimeout(() => { // 模拟请求
next(); // 请求到数据,执行next() 表示加载完毕,关闭效果
}, 2000);
},
pullOpen(next) { // 上拉加载触发方法
console.log('上拉加载');
setTimeout(() => { // 模拟请求
next();
}, 4000);
}
},
components: {
refresh
}
};