[精致的下拉刷新和上拉加载js框架-mescroll]
mescroll 介绍：精致的下拉刷新和上拉加载 js 框架
- 原生 js 实现，不依赖 jquery,zepto
- 支持 Vue
- 支持 uni-app，一套代码多端运行，完美运行于 android, iOS, 手机各浏览器
- 兼容 PC 端主流浏览器
安装
npm install --save mescroll.js
封装
- 下拉刷新配置
defaultMescrollDown - 上拉加载配置
defaultMescrollUp - 是否允许 ios 的 bounce 回弹
isBounce
<!--mescroll滚动区域的基本结构-->
<mescroll-vue
ref="mescroll"
:down="mescrollDown"
:up="mescrollUp"
@init="mescrollInit"
>
<!--内容区域-->
<slot></slot>
</mescroll-vue>
</template>
<script>
// 引入 mescroll 组件
import MescrollVue from "mescroll.js/mescroll.vue";
export default {
name: "Mescroll",
components: {
MescrollVue,
},
props: {
downConfig: {
type: Object,
default: () => {},
},
upConfig: {
type: Object,
default: () => {},
},
},
data() {
return {
mescroll: null, // mescroll实例对象
defaultMescrollDown: {
// 下拉刷新的配置(如果和上拉加载处理的逻辑是一样的,则mescrollDown可不用写)
auto: true, // 是否在初始化完毕之后自动执行一次下拉刷新的回调 callback
callback: this.downCallback,
textInOffset: "pull down to refresh", // 下拉刷新
textOutOffset: "release update", // 释放更新
textLoading: "loading", // 加载中
},
defaultMescrollUp: {
// 上拉加载的配置
use: false, // 是否启用上拉加载
auto: false,
callback: this.upCallback, // 上拉回调,此处简写; 相当于 callback: function(page, mescroll) { }
// 以下是一些常用的配置,当然不写也可以的.
page: {
num: 0, // 当前页 默认0,回调之前会加1; 即callback(page)会从1开始
size: 10, // 每页数据条数,默认10
},
htmlNodata: '<p class="upwarp-nodata">-- END --</p>',
noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于5才显示无更多数据;避免列表数据过少(比如只有一条数据)，显示无更多数据会不好看，这就是为什么无更多数据有时候不显示的原因
toTop: {
// 回到顶部按钮
src: "./static/mescroll/mescroll-totop.png", // 图片路径,默认null,支持网络图
offset: 1000, // 列表滚动1000px才显示回到顶部按钮
},
empty: {
// 列表第一页无任何数据时,显示的空提示布局; 需配置warpId才显示
warpId: "xxid", // 父布局的id (1.3.5版本支持传入dom元素)
icon: "./static/mescroll/mescroll-empty.png", // 图标,默认null,支持网络图
tip: "暂无相关数据~", // 提示
},
},
dataList: [], // 列表数据
};
},
computed: {
mescrollDown() {
return Object.assign(this.defaultMescrollDown, this.downConfig);
},
mescrollUp() {
return Object.assign(this.defaultMescrollUp, this.upConfig);
},
},
// 如果没有配置回到顶部按钮或isBounce,则beforeRouteEnter不用写
beforeRouteEnter(to, from, next) {
next((vm) => {
// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteEnter方法
// 进入路由时,滚动到原来的列表位置，恢复回到顶部按钮和isBounce的配置
vm.$refs.mescroll && vm.$refs.mescroll.beforeRouteEnter();
});
},
// 如果没有配置回到顶部按钮或isBounce,则beforeRouteLeave不用写
beforeRouteLeave(to, from, next) {
// 找到当前mescroll的ref,调用子组件mescroll-vue的beforeRouteLeave方法
// 退出路由时,记录列表滚动的位置,隐藏回到顶部按钮和isBounce的配置
this.$refs.mescroll && this.$refs.mescroll.beforeRouteLeave();
next();
},
beforeDestroy() {
if (this.mescroll) {
this.mescroll.destroy();
this.mescroll = null;
}
},
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
this.mescroll = mescroll;
},
downCallback(mescroll) {
this.$emit("down-callback", mescroll);
},
// 上拉回调 page = {num:1, size:10}; num:当前页 ,默认从1开始; size:每页数据条数,默认10
upCallback(page, mescroll) {
// 联网请求
axios
.get("xxxxxx", {
params: {
num: page.num, // 页码
size: page.size, // 每页长度
},
})
.then((response) => {
// 请求的列表数据
const arr = response.data;
// 如果是第一页需手动置空列表
if (page.num === 1) {
this.dataList = [];
}
// 把请求到的数据添加到列表
this.dataList = this.dataList.concat(arr);
// 数据渲染成功后,隐藏下拉刷新的状态
this.$nextTick(() => {
mescroll.endSuccess(arr.length);
});
})
.catch((e) => {
// 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
mescroll.endErr();
});
},
},
};
</script>
<style scoped></style>
