mescroll 上拉刷新 下拉加载 实战使用
基于NuxtJS 2.x构建的项目实现，mescroll.js 为 1.4.1
mescroll 介绍：精致的下拉刷新和上拉加载 js 框架
原生 js 实现，不依赖 jquery,zepto
支持 Vue
支持 uni-app，一套代码多端运行，完美运行于 android, iOS, 手机各浏览器
兼容 PC 端主流浏览器
Axios 文档
mescroll 官网
安装
npm install --save mescroll.js 复制代码
封装
下拉刷新配置
defaultMescrollDown上拉加载配置
defaultMescrollUp是否允许 ios 的 bounce 回弹
isBounce
<template> <!--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>-- 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> 复制代码使用
<template> <mescroll-component @down-callback="downCallback"> <list-product :list-data="listData"></list-product> </mescroll-component> </template> <script> import MescrollComponent from "~/components/common/Mescroll"; import ListProduct from "~/components/product/ListProduct.vue"; export default { components: { MescrollComponent, ListProduct, }, data() { return { mescroll: null, listData: [], }; }, methods: { downCallback(mescroll) { this.mescroll = mescroll; this.$axios .post("xxx") .then((res) => { if (res.code === 0) { this.listData = res.response; this.mescroll.scrollTo(0, 0); // 回到顶部 this.$nextTick(() => { this.mescroll.endSuccess(); }); } else { this.mescroll.endErr(); } }) .catch((error) => { this.mescroll.endErr(error); }); }, }, }; </script> <style lang="scss" scoped> .mescroll { height: calc(100% - 1rem); } </style>
作者：时光足迹
链接：https://juejin.cn/post/7020321760042024990