更新记录
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写法。
查看更多
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
× |
× |
× |
× |
× |
<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
}
};