mescroll.js 使用

mescroll.js 使用

第一步：引入css和js

// unpkg的CDN:


		
// jsdelivr的CDN:

第二步：拷贝布局结构

 //id可以改,而"mescroll"的class不能删
	
 //这个div不能删,否则上拉加载的布局会错位.(可以改成ul或者其他容器标签)
		//内容...
	

第三步：固定mescroll的div高度. 推荐通过定位的方式,简单快捷

.mescroll {
	position:fixed;
	top:44px;
	bottom:0;
	height:auto;
	/*如设置bottom:50px,则需height:auto才能生效*/
}

第四步：创建一个mescroll对象

var mescroll = null; //建议设置成全局变量，否则会有意想不到的错误
mescroll = new MeScroll(el, { //第一个参数"mescroll"对应上面布局结构div的id (1.3.5版本支持传入dom对象)
	// 下拉刷新 如果您的下拉刷新是重置列表数据,那么down完全可以不用配置
	down: {
	    callback: downCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
	},
    // 上拉加载
    up: {
        // 是否自动加载第一页的数据，默认 true
        auto: true,
        // 无数据展示
        htmlNodata: ‘
-我是有底线的-
‘,
        // 分页参数对象
        page: {
            num: 0,
            size: 10
        },
        //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        noMoreSize: 5,
        // toTop: { //配置回到顶部按钮
        // 	src: "../../static/image/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
        // 	offset: 500
        // },
        // 加载中的提示语
        htmlLoading: ‘
加载中……
‘,
        //上拉加载中的布局
        callback: upCallback //上拉加载的回调
    }
});

第五步：处理回调

// 下拉刷新的回调
function downCallback() {
	……do something……
}
// 上拉加载的回调
function downCallback() {
	……do something……
}

补充信息

// 锁定下拉刷新
mescroll.lockDownScroll(true);
// 锁定上拉加载
// mescroll.lockUpScroll(true);

原文：https://www.cnblogs.com/sxdpanda/p/15186092.html