mescroll vue使用

超、凢脫俗 2024-04-18 18:49 16阅读 0赞

github:https://github.com/mescroll/mescroll  
官方文档：http://www.mescroll.com

最好按照官方文档来

1.  开启初始化完毕之后自动执行上拉加载的回调，保证一进入页面，就去加载数据
2.  上拉刷新的时候，或者tab切换的时候，先将数据置空
3.  page 和 pageSize使用upOption中的，并且num默认为0

代码：

// html
    <mescroll-uni top="100" @down="downCallback" @up="upCallback" @init="mescrollInit" :up="upOption" :down="downOption">
    
    //data:
    // 下拉刷新的常用配置
    downOption: {
    	use: true, // 是否启用下拉刷新; 默认true
    	auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
    },
    // 上拉加载的常用配置
    upOption: {
    	use: true, // 是否启用上拉加载; 默认true
    	auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
    	textNoMore:'我是有底线的 >_<',
    	page: {
    		num:0,
    		size: 4
    	}
    },
    list:[],
    
    //methods:
    // 下拉回调
    downCallback(mescroll){
    	mescroll.setPageNum(1)
    	this.list = []
    	mescroll.resetUpScroll(); 
    	setTimeout(()=>{
    		console.log(666);
    		// 隐藏下拉加载状态
    		mescroll.endErr()
    	},1000)
    },
    // 上拉回调
    upCallback(mescroll){
    	setTimeout(()=>{
    		let pageNum = mescroll.num == 0 ? 1: mescroll.num; // 页码, 默认从1开始
    		let pageSize = mescroll.size;
    		this.getPageList(pageNum, pageSize).then((res)=>{
    			mescroll.endSuccess(res)
    		})
    	},1000)
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，16人围观）

还没有评论，来说两句吧...

相关阅读

相关 mescroll vue使用

ithub:https://github.com/mescroll/mescroll 官方文档：http://www.mescroll.com 最好按照官方文档来 ...

超、凢脫俗/ 2024年04月18日 18:49/ 0 赞/ 17 阅读

相关 mescroll-uni实现下拉刷新和上拉加载

mescroll-uni mescroll-uni 是 uni-app 下拉刷新和上拉加载的组件，[下载案例][Link 1]后，放到项目里 ![在这里插入图片描述][

绝地灬酷狼/ 2023年10月11日 12:38/ 0 赞/ 103 阅读

相关 mescroll.js API汇总

mescroll.optUp 对象有个属性 hasNext 这个属性掌控着上拉加载的事件，false 表示关闭上拉加载事件，反之为true 网上没有查到该属性的讲解

今天药忘吃喽~/ 2023年08月17日 17:05/ 0 赞/ 17 阅读

相关实现移动端上拉加载和下拉刷新的vue插件(mescroll.js)

> 做一个简单的移动端展示项目，后台分页后前端加载，实现上拉加载下一页，找了下，还是用这个mescroll.js插件好一点 1.npm安装 npm ins

朴灿烈づ我的快乐病毒、/ 2023年06月06日 04:58/ 0 赞/ 37 阅读

相关 js使用mescroll下拉刷新和页面传参

引入mescroll.js <script type="text/javascript" src="./js/mescroll.m.js"></script>

快来打我*/ 2022年12月27日 08:27/ 0 赞/ 118 阅读

相关 uni-app引用mescroll-uni的简单示例

<template> <view> <mescroll-uni top="0" bottom="0" @down="downCallback" @

电玩女神/ 2022年11月20日 12:56/ 0 赞/ 420 阅读

相关 antd mobile(十一) MeScroll集成到项目中

MeScroll是在一个论坛看到的，论坛说比iscroll5 强大多了，本人对iscroll5早就不爽了，所以豪不犹豫的决定换掉它。经过一天的奋斗，发现MeScroll确

蔚落/ 2022年06月09日 14:10/ 0 赞/ 270 阅读

相关 mescroll.js实现下拉刷新，上拉加载！！

一：下载并引用 <link rel="stylesheet" href="assets/css/mescroll.min.css"> <script type="te

拼搏现实的明天。/ 2022年06月04日 01:13/ 0 赞/ 359 阅读

相关 Vue - Vue使用笔记

判断DOM是否渲染完成在生命周期中，mounted周期是dom渲染后执行的。在组件内部，如果需要等待重新给Model赋值后DOM的渲染结束，可以使用`se

小灰灰/ 2022年05月13日 13:00/ 0 赞/ 328 阅读

相关 uniapp 上垃加载下拉刷新 mescroll

![在这里插入图片描述][20190814112757569.png] <template> <mescroll-uni :down="downOption

以你之姓@/ 2021年10月19日 01:34/ 0 赞/ 701 阅读