记录webApp 中使用下拉刷新，上拉加载的的实例
使用 pullToRefresh.js和iscroll.js
首先页面引入相关文件
<script src="../../../js/jquery-2.1.3.min.js"></script>
<script src="../../../js/pullToRefresh.js"></script>
<script src="../../../js/iscroll.js"></script>
<link href="../../../scrollcss/reset.css" rel="stylesheet" />
<link href="../../../scrollcss/pullToRefresh.css" rel="stylesheet" />
html部分
<div id="wrapper" class="wrapper page-home">
<div><%--这个div标签必写因为在iscrool.js中取id为wrapper下的第一个元素为滑动对象--%>
<div class="couponList">
</div>
<i id="onloadMore">点击加载更多...</i>
</div>
</div>
js部分
判断是PC端还是移动端
var system = {};
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
system.mac = p.indexOf("Mac") == 0;
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);
var isPC = system.win || system.mac || system.xll;
在页面加载完成的时候调用下面方法
function judgeIsPC() {
//debugger;
var height = $(window).height();
var width = $('#device_group').innerWidth();
var width = $('#device_group').outerWidth();
isPC = false;
if (isPC) {//PC端
// debugger;
$('html').css({ "height": "100%", "overflow": "hidden" });
$('body').css({ "height": "100%", "overflow": "hidden" });
$(".couponList").css({ "height": height - 122, "overflow-y": "auto" });//$(".couponList")为需要分页显示数据的元素
$(".pullUp").hide();
$("#onloadMore").show();
} else {
refresher.init({
id: "wrapper",
pullDownAction: Refresh,//下拉刷新时调用的方法
pullUpAction: Load//上拉加载更多时调用的方法
});
$("#wrapper").css({ "height": height-46, "min-height":0});
wrapper.refresh();/****remember to refresh after action completed！！！ ---id.refresh(); --- ****/
$("#onloadMore").hide();
setTimeout(function () {
var el, li, i;
el = document.querySelector("#wrapper div");
$(".pullUpLabel").text("上拉进行翻页...").show();
wrapper.refresh();/****remember to refresh after action completed！！！ ---id.refresh(); --- ****/
$(".pullUp").removeClass("loading").show();
$(".loader").hide();
}, 1000);
}
}
$(function () {
$("#onloadMore").hide();
judgeIsPC();
fillPage();//加载分页数据的方法
$("#onloadMore").click(function () {
debugger;
if ($(this).text() == "没有数据了...") {
return true;
}
fillPage();
});
});
function fillPage(callback) {
var html = '';
$.ajax({
type: 'get',
url: '/Admin/Ajax/Coupon.ashx',
dataType: 'json',
async: false,
data: {
act: 'GetCouponPlanPage',
PageIndex: pageIndex ? pageIndex : 1,
PageSize: 5,
BeginDate: 0,
EndDate: 0,
ShopID: '<%=_AdminUserInfo.ShopID%>',
Keyword: ''
},
success: function (result) {
if ((result == null || !result.success) || (result.data == null || result.data.length == 0)) {
if (!isPC) {
$(".pullUpLabel").text("没有更多数据了...").show();
$(".pullUp").removeClass("loading").show();
$(".loader").hide();
wrapper.refresh();
} else {
$("#onloadMore").text("没有数据了...").show();
}
return;
}
if (result && result.success && result.data) {
var couponList = result.data;
pageIndex++;
for(let i=0;i<couponList.length;i++){
html+='<div class="couponItem">';
html+=' <div class="row">';
html+=' <span class="partTitle">名称：</span>';
html+=' <span>'+couponList[i].Name+'</span>';
html+=' </div>';
html+='<div class="row">';
html += ' <span class="partTitle">参与商品：</span>';
html += '<div style="display:inline-block;width:77%">';
html += '<span class="oneElem" style="width:100%">' + couponList[i].GoodsNames + '</span>';
html += '</div>';
html+=' </div>';
html+=' <div class="row">';
html += ' <span class="partTitle">参与设备：</span>';
html += '<div style="display:inline-block;width:77%">';
html += '<span class="oneElem" style="width:100%">' + couponList[i].MachineIDs + '</span>';
html += '</div>';
html+='</div>';
html+=' <div class="row">';
html += '<span class="partTitle">参与群体：</span>';
html += '<span>' + transformUsertype(couponList[i].UserType) + '</span>';
html+='</div>';
html+='<div class="row">';
html+=' <span class="partTitle">领取限制：</span>';
html += '<span>' + couponList[i].CycleDay + "天最多领取" + couponList[i].ReceiveCount +"个" + '</span>';
html+='</div>';
html+='<div class="row">';
html+='<span class="partTitle">有效期限：</span>';
html+='<span>'+couponList[i].CreateDate+" - "+couponList[i].EndDate+'</span>';
html+='</div>';
html+='<div class="plainRow">';
html+='<span class="partTitle">临期规则：</span>';
for (let j = 0; j < couponList[i].PlanList.length; j++) {
var plan = couponList[i].PlanList[j];
var style = j == 0 ? '' : 'style = "margin-left:70px;"';
html += '<div class="plain" ' + style + '>临期' + plan.DateSpan + "天," + (plan.Amount == 0 ? ("享受" + plan.Discount + "折") : ("一律" + plan.Amount + "元")) + '</div>';
}
html+=' </div>';
html+='<div class="row editButtons">';
html += ' <input type="button" value="编辑" onclick="editCoupon(this)" data-id="' + couponList[i].CouponPlanID + '" class="button-solid edit_button"/>';
html += '<input type="button" class="button-white edit_button" onclick="deleteCoupon(this)" data-id="' + couponList[i].CouponPlanID + '" value="删除" />';
html+='</div>';
html+='<div class="sspace2"></div>';
html += '</div>';
}
if (!isPC) $(".pullUpLabel").text("上拉进行翻页...").show();
else $("#onloadMore").text("点击加载更多...").show();
if (callback != undefined) callback();
}
}, error: function (result) {
//layer.msg((result && result.message) ? result.message : '请稍后重试');
if (!isPC) $(".pullUpLabel").text("没有更多数据了...").show();
else $("#onloadMore").text("没有数据了...").show();
}
});
$('.couponList').append(html);
}
function Load() { //下拉要加载的代码
var el, li, i;
el = document.querySelector("#wrapper div");
fillPage(function () {
// debugger;
wrapper.refresh();/****remember to refresh after action completed！！！ ---id.refresh(); --- ****/
if (!isPC) {
$(".pullUp").removeClass("loading").show();
$(".loader").hide();
}
});
}
function Refresh() { //上拉要执行的代码
setTimeout(function () { // <-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.querySelector("#wrapper div");
el.innerHTML = '';
wrapper.refresh();/****remember to refresh after action completed！ ---yourId.refresh(); ----| ****/
location.reload();
}, 1000);
}
补充css,只显示一行超出的部分显示...
.oneElem{
*display:inline-block;*
word-break: break-all;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
/*border-bottom:1px #DDD solid;*/
}
