mescroll.js 使用

mescroll.js 使用

附：点击查看中文文档

第一步：引入css和js

// unpkg的CDN:
<link rel="stylesheet" href="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.css">
<script src="https://unpkg.com/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>

// jsdelivr的CDN:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.css">
<script src="https://cdn.jsdelivr.net/npm/mescroll.js@1.4.1/mescroll.min.js" charset="utf-8"></script>

第二步：拷贝布局结构

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

第三步：固定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: '<p class="upwarp-nodata">-我是有底线的-</p>',
        // 分页参数对象
        page: {
            num: 0,
            size: 10
        },
        //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
        noMoreSize: 5,
        // toTop: { //配置回到顶部按钮
        // 	src: "../../static/image/mescroll-totop.png", //默认滚动到1000px显示,可配置offset修改
        // 	offset: 500
        // },
        // 加载中的提示语
        htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中……</p>',
        //上拉加载中的布局
        callback: upCallback //上拉加载的回调
    }
});

第五步：处理回调

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

补充信息

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