官网地址是:
下载mescroll.js插件。
在页面中引入如下两个文件:
mescroll.min.css
mescroll.min.js
html部分代码
<div class="container"><div id="mescroll" class="my-address mescroll"><div id="addressList" class="address-list"><!-- 这里是ajax返结果list --></div></div></div>
需要注意的地方是页面的container必须有固定高度,否则上拉无效。
var pageNum = 1; //页码var size = 10; //每页数据固定条数//创建MeScroll对象var mescroll = new MeScroll("mescroll", {down: {isLock // 锁定下拉功能 //callback: upCallback //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了 },up: {callback: upCallback //上拉加载的回调 ,empty: {//列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效;warpId:'mescroll', //父布局的id; 如果此项有值,将不使用clearEmptyId的值;icon: null, //图标,默认nulltip: "暂无相关数据~", //提示btntext: "", //按钮,默认""btnClick: null, //点击按钮的回调,默认null },}});//下拉刷新的回调function downCallback() {}//上拉加载的回调 page = {num:1, size:10}; num:当前页 默认从1开始, size:每页数据条数,默认10function upCallback(page) {$.ajax({url: '/screen/pickUpPoint/findPickUpPointList?current='+pageNum+'&pageSize='+size,dataType:'json',type:'GET',success: function(json) {console.log(json)var data = json.data;var _html = $('#addressListTmpl').render(data);$('#addressList').append(_html);mescroll.endByPage(data.records.length, data.totalPage);pageNum++},error: function(e) {//联网失败的回调,隐藏下拉刷新和上拉加载的状态mescroll.endErr();}});}
大概就是这么个流程,具体详细的还需看官方文档给出的,这里只是做一个简单的效果!