mescroll上拉刷新下拉加载实战使用

发布网友发布时间：2024-10-03 19:32

我来回答

共1个回答

热心网友时间：2024-10-19 15:10

基于NuxtJS2.x构建的项目实现，mescroll.js为1.4.1

mescroll介绍：精致的下拉刷新和上拉加载js框架

原生js实现，不依赖jquery,zepto

支持Vue

支持uni-app，一套代码多端运行，完美运行于android,iOS,手机各浏览器

兼容PC端主流浏览器

Axios文档

mescroll官网

安装npminstall--savemescroll.js封装

下拉刷新配置defaultMescrollDown

上拉加载配置defaultMescrollUp

是否允许ios的bounce回弹isBounce

<template><mescroll-vueref="mescroll":down="mescrollDown":up="mescrollUp"@init="mescrollInit"><slot></slot></mescroll-vue></template><script>//引入mescroll组件importMescrollVuefrom"mescroll.js/mescroll.vue";exportdefault{name:"Mescroll",components:{MescrollVue,},props:{downConfig:{type:Object,default:()=>{},},upConfig:{type:Object,default:()=>{},},},data(){return{mescroll:null,//mescroll实例对象defaultMescrollDown:{//下拉刷新的配置(如果和上拉加载处理的逻辑是一样的,则mescrollDown可不用写)auto:true,//是否在初始化完毕之后自动执行一次下拉刷新的回调callbackcallback:this.downCallback,textInOffset:"pulldowntorefresh",//下拉刷新textOutOffset:"releaseupdate",//释放更新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:'<pclass="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(){returnObject.assign(this.defaultMescrollDown,this.downConfig);},mescrollUp(){returnObject.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:每页数据条数,默认10upCallback(page,mescroll){//联网请求axios.get("xxxxxx",{params:{num:page.num,//页码size:page.size,//每页长度},}).then((response)=>{//请求的列表数据constarr=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><stylescoped></style>使用<template><mescroll-component@down-callback="downCallback"><list-product:list-data="listData"></list-product></mescroll-component></template><script>importMescrollComponentfrom"~/components/common/Mescroll";importListProductfrom"~/components/product/ListProduct.vue";exportdefault{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><stylelang="scss"scoped>.mescroll{height:calc(100%-1rem);}</style>