首先导入
<link rel="stylesheet" href="/css/mescroll.min.css">
及
<script type="text/javascript" src="/js/mescroll.min.js"></script>
页面如下
<div class="search-bar clearfix"> <input type="text" id="keyword" value="${query.keyword}" name="keyword" placeholder="信息 | 手机号 | 公司名称"> <button οnclick="searchIndex(event)" style="float:right ">搜索</button> </div>
<div class="content mescroll" id="mescroll" > <div id="dataList" class="data-list"> <!-- 这里是ajax返结果list --> </div> </div>
js代码实现如下：
<script type="text/javascript"> //是否为PC端,如果是scrollbar端,默认自定义滚动条 var isPC = typeof window.orientation == 'undefined' ; //创建MeScroll对象 $(function(){ var mescroll = new MeScroll("mescroll", { up: { use: true, //是否初始化上拉加载; 默认true auto: true, //是否在初始化时以上拉加载的方式自动加载第一页数据; 默认true isLock: false, //是否锁定上拉,默认false isBoth: true, //上拉加载时,如果滑动到列表顶部是否可以同时触发下拉刷新;默认false,两者不可同时触发; 这里为了演示改为true,不必等列表加载完毕才可下拉; isBounce: false, //是否允许ios的bounce回弹;默认true,允许回弹; 此处配置为false,可解决微信,QQ,Safari等等iOS浏览器列表顶部下拉和底部上拉露出浏览器灰色背景和卡顿2秒的问题 callback: upCallback, //上拉回调,此处可简写; 相当于 callback: function (page, mescroll) { getListData(page); } page: { num: 0, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始 size: 10, //每页数据条数 time: null //加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复; }, noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看 offset:500, //离底部的距离 toTop: { //回到顶部按钮,需配置src才显示 warpId: null, //父布局的id; 默认添加在body中 src: "/res/img/mescroll-totop.png", //图片路径,默认null; html: null, //html标签内容,默认null; 如果同时设置了src,则优先取src offset: 1000, //列表滚动多少距离才显示回到顶部按钮,默认1000 warpClass: "mescroll-totop", //按钮样式,参见mescroll.css showClass: "mescroll-fade-in", //显示样式,参见mescroll.css hideClass: "mescroll-fade-out", //隐藏样式,参见mescroll.css duration: 300, //回到顶部的动画时长,默认300ms supportTap: false //默认点击事件用onclick,会有300ms的延时;如果您的运行环境支持tap,则可配置true; }, loadFull: { use: false, //列表数据过少,不足以滑动触发上拉加载,是否自动加载下一页,直到满屏或者无更多数据为止;默认false,因为可通过调高page.size或者嵌套mescroll-bounce的div避免这个情况 delay: 500 //延时执行的毫秒数; 延时是为了保证列表数据或占位的图片都已初始化完成,且下拉刷新上拉加载中区域动画已执行完毕; }, empty: { //列表第一页无任何数据时,显示的空提示布局; 需配置warpId或clearEmptyId才生效; warpId:null, //父布局的id; 如果此项有值,将不使用clearEmptyId的值; icon: "/res/img/mescroll-empty.png", //图标,默认null tip: "暂无相关数据~", //提示 supportTap: false //默认点击事件用onclick,会有300ms的延时;如果您的运行环境支持tap,则可配置true; }, clearId: null, //加载第一页时需清空数据的列表id; 如果此项有值,将不使用clearEmptyId的值; clearEmptyId: "dataList", //相当于同时设置了clearId和empty.warpId; 简化写法,默认null; hardwareClass: "mescroll-hardware", //硬件加速样式,动画更流畅,参见mescroll.css warpId: null, //可配置上拉加载的布局添加到指定id的div;默认不配置,默认添加到mescrollId warpClass: "mescroll-upwarp", //容器,装载布局内容,参见mescroll.css htmlLoading: '<p class="upwarp-progress mescroll-rotate"></p><p class="upwarp-tip">加载中..</p>', //上拉加载中的布局 htmlNodata: '<p class="upwarp-nodata">-- END --</p>', //无数据的布局 inited: function(mescroll, upwarp) { console.log("up --> inited"); //初始化完毕的回调,可缓存dom 比如 mescroll.upProgressDom = upwarp.getElementsByClassName("upwarp-progress")[0]; }, showLoading: function(mescroll, upwarp) { console.log("up --> showLoading"); //上拉加载中.. mescroll.upProgressDom.style.display = "block" 不通过此方式显示,因为ios快速滑动到底部,进度条会无法及时渲染 upwarp.innerHTML = mescroll.optUp.htmlLoading; }, showNoMore: function(mescroll, upwarp) { console.log("up --> showNoMore"); //无更多数据 upwarp.innerHTML = mescroll.optUp.htmlNodata; }, onScroll: function(mescroll, y, isUp){ //列表滑动监听,默认onScroll: null; //y为列表当前滚动条的位置 //console.log("up --> onScroll 列表当前滚动的距离 y = " + y + ", 是否向上滑动 isUp = " + isUp); }, scrollbar: { use: isPC, //默认只在PC端自定义滚动条样式 barClass: "mescroll-bar" } } }); //上拉加载的回调 page = {num:1, size:3}; num:当前页 默认从1开始, size:每页数据条数,默认10 function upCallback(page) {
//查询条件
var keyword=$("#keyword").val();
getListDataFromNet(page.num,page.size,keyword,function(data){
page.num++;
//设置列表数据
setDataList(data.list, true);
}, function(){
//联网失败的回调,隐藏上拉加载的状态
alert("endErr1");
mescroll.endErr();
});
}
function getListDataFromNet(pageNum,pageSize,keyword,successCallback,errorCallback) {
var dateline= new Date().getTime();
//延时一秒,模拟联网
$.ajax({url: "/**/**",
dataType:'json',
type:'post',
data:{
"page":pageNum,
"size":pageSize,
"keyword":keyword,
"_t":dateline
},
success: function(data) {
mescroll.endSuccess(data.length);
successCallback(data);
},
error: function(e) {
//联网失败的回调,隐藏下拉刷新和上拉加载的状态
mescroll.endErr();
errorCallback;
}
});
}
function setDataList(data, isAppend){
var _html=$("#dataList").html();
var listDom=document.getElementById("dataList");
for(var i=0;i<data.length;i++){
var _html= "<div class='item-heading clearfix'>"
+"<a href='javaScript:void(0)' οnclick='showDetail('"+data[i]['mm_msg_id']+"')' class='left clearfix'>"
+" <img src='"+data[i]['mm_emp_cover']+"' alt='' class='head-pic'>"
+"<div class='detail'>"
+" <h1 class='company'>"+data[i]['mm_emp_company']+" "+data[i]['mm_emp_nickname']+"</h1>"
+" <h3 class='time'>"+data[i]['dateline']+" "+data[i]['area']+"</h3>"
+" </div>"
+" </a>"
+" <div class='right'>"
+" <div class='top clearfix'>";
if(data[i]['is_miaomu']=='1'){
_html=_html+"<img src='/img/tree_icons_trust.png' alt=''>";
}
if(data[i]['is_chengxin']=='1'){
_html=_html+"<img src='/img/tree_icons_group.png' alt=''>";
}
_html=_html+" </div>"
+" <div class='botton clearfix'>";
switch(data[i]['mm_level_num']){
case 1:
_html=_html+"<img src='/img/tree_icons_star_2.png' alt=''>";
break;
case 2:
_html=_html+"<img src='/img/tree_icons_star_3.png' alt=''>";
break;
case 3:
_html=_html+"<img src='/img/tree_icons_star_4.png' alt=''>";
break;
case 4:
_html=_html+"<img src='/img/tree_icons_star_5.png' alt=''>";
break;
default:
_html=_html+"<img src='/img/tree_icons_star_1.png' alt=''>";
break;
}
_html=_html +" </div>"
+" </div>"
+" </div>"
+" <a class='item-content' href='javaScript:void(0)' οnclick='showDetail('"+data[i]['mm_msg_id']+"')'>"
+data[i]['mm_msg_content']+" </a>"
+" <div class='item-footer clearfix'>"
+" <a href='tel:"+data[i]['mm_emp_mobile']+"' class='button-phone'></a>"
+" <a type='button' href='javaScript:void(0)' οnclick='favourClick('"+data[i]['mm_msg_id']+"')'"
+" class='button-fav'>"
+" </a>";
if(data[i]['mm_msg_video']==null && data[i]['mm_msg_picurl']!="" && data[i]['mm_msg_picurl']!=null){
_html=_html+" <a type='button' οnclick='showDetail('"+data[i]['mm_msg_id']+"')' class='button-pic'></a>";
}else if(data[i]['mm_msg_video']!="" && data[i]['mm_msg_video']!=null){
_html=_html+"<a type='button' οnclick='showDetail('"+data[i]['mm_msg_id']+"')' class='button-video'></a>";
}
_html=_html +" </div>";
var liDom=document.createElement("div");
liDom.setAttribute("class","item");
liDom.innerHTML=_html;
if (isAppend) {
listDom.appendChild(liDom);//加在列表的后面,上拉加载
} else{
listDom.insertBefore(liDom, listDom.firstChild);//加在列表的前面,下拉刷新
}
}
}
});
function searchIndex(e) {
var _index = $("#index").val();
var size = $("#size").val();
var keyword = $("#keyword").val();
var page={num:1,size:10};
alert("123");
getListDataFromNet(page.num,page.size,keyword, function(data){
page.num++;
//设置列表数据
setDataList(data.list, true);
}, function(){
//联网失败的回调,隐藏上拉加载的状态
alert("endErr1");
mescroll.endErr();
});
}
</script>
关于
new MeScroll的配置请参考 http://www.mescroll.com/api.html
4658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
