h5有两个上拉刷新加载方法
1. 默认以窗体的高度来加载(用在不用选显卡滑动的功能，即只有一个加载)
2. 以元素(div)的高度来加载(用在选显卡滑动的功能，有多个加载功能，并且可以让它们独立，互不影响高度)
第一种加载方法案例
<div data-tab-panel-2 class="am-tab-panel more" value="2" style="padding-top: 90px;">
<div style="width: 100%;height: 30px;background: #fff; z-index: 99999;position: fixed;"></div>
<div class="pingjia_contant">
<div class="pingjia_row">
<div style="border-right:1px solid #000000; width:33.333333333%" class="pingjia-item active" current="0">全部</div>
<div style="border-right:1px solid #000000;width:33.333333333%" class="pingjia-item " current="1">最新</div>
<div style="width:33.333333333%" class="pingjia-item" current="2">有图({$youtu})</div>
</div>
<div class="all_scroll" id='all_pj'>
<!-- <noLoading class="foot_paging" wx:if="{{allPagesshaidan > shaidanpages}}">
<image mode="widthFix" src="/static/images/loading.gif"></image>
</noLoading> -->
</div>
</div>
<div class="no-more" style="text-align: center;" id="shaidangss"></div>
</div>
<input type="hidden" class="page" value="1">
<input type="hidden" class="pagecount" value="">
$(window).scroll(function(){
var scrollTop = $(this).scrollTop(); //向上滑动的高度
var scrollHeight = $(document).height(); //内容的高度
var windowHeight = $(this).height(); //设备的高度
if ((scrollTop +windowHeight) >= (scrollHeight)) {
if($('#all_pj').children('div').hasClass("un_content")){
$("#shaidangss").html('');
}
else{
$("#shaidangss").html('数据加载中...');
}
var page=$('.page').val();
var pagenew=page*1+1;
var pagecount=$('.pagecount').val();
if(pagecount>=pagenew){
var isjiazai=true;
$('.page').val(pagenew);
appevalute(isjiazai);
}
else{
if($('#all_pj').children('div').hasClass("un_content"))
{
$("#shaidangss").html('');
}
else{
$("#shaidangss").html('没有更多数据了');
}
}
}
})
//默认评价全部
function appevalute(isjiazai){
var goods_id = "{$goods_id}";
var page=$('.page').val();
var current=$('.pingjia_row .active').attr('current');
$.post('{:url("wap/goods/appevalute")}',{goods_id:goods_id,page:page,current:current}, function(data){
var str =$.parseJSON(data);
console.log(str);
$('.page').val(page);
$('.pagecount').val(str.pagecount);
if(str.list.length>0){
//var to_array = eval("("+data+")");
var list=str.list;
var html="";
var head_img="";
for(var p in list){
if(list[p].have_headimg!=null){
head_img=list[p].user_headimg;
}
else{
head_img="WAP_IMG/images/default_head.png";
}
html+='<div class="all_scroll">';
html+='<div class="pingjia_content_row" >';
html+='<div class="logo_user">';
html+='<img src='+head_img+'>';
html+='<span>'+list[p].member_name+'</span>';
html+='<div class="pinglutime">'+list[p].addtime+'</div>';
html+='</div>';
html+='<div class="pingjia_content" >';
html+='<div class="contentss">'+list[p].content+'</div>';
if(list[p]['pj_image'].length>0){
html+='<div class="imgss" >';
for(var i in list[p]['pj_image']){
html+='<img src='+list[p]['pj_image'][i]+'>';
}
html+='</div>';
}
html+='<div class="clear"></div>';
if(list[p]['explain_first']!=""){
html+='<div class="pinglu">店家回复：'+list[p]['explain_first']+'</div>';
}
if(list[p]['again_content']!=""){
html+='<div class="rediv-evaluationss">追加评价<text class="rediv-time">'+list[p]['again_addtime']+'</text></div>';
html+='<div class="evaluation-contentss rediv">'+list[p]['again_content']+'</div>';
if(list[p]['again_image'].length>0){
html+='<div class="evaluation-pics">';
for(var j in list[p]['again_image']){
html+='<img class="comment-pic zuijia" src='+list[p]['again_image'][j]+'>';
}
html+='</div>';
}
if(list[p]['again_explain']!=""){
html+='<div class="evaluation-replyss">店家回复：'+list[p]['again_explain']+'</div>';
}
}
html+='</div>';
html+='</div>';
}
if(isjiazai){
$("#all_pj").append(html);
}
else{
$("#all_pj").html(html);
}
}else{
var un_html="<div class='un_content'>暂无评价</div>"
$("#all_pj").html(un_html);
}
}, 'json');
}
这个加载也可以用来选显卡加载切换，需要判断而已，但是不怎么方便，所以本人觉得还是用第二种加载方式用来选显卡加载（如订单页面等等）
第二种加载方案
<!--待发货-->
<html>
<head></head>
<body>
<div class="swipe ">
<li class="li_list daifahuo" style="background:#f5f5f5">
<div class="main">
{if $fashouhuo_1=='0'}
<div class="zwdd">
暂无订单！
</div> {else/} {foreach name="$fashouhuo" item="vo"}
<div class="order_row">
<div class="order">
<div class="order_hao_row">
<div class="order_hao">
订单:
<text>
{$vo.order_no}
</text>
</div> {if $vo['refund']==null}
<div class="order_tz">
待发货
</div> {elseif $vo['refund']==1 || $vo['refund']==4}
<div class="order_tz">
退款处理中
</div> {elseif $vo['refund']==5}
<div class="order_tz">
退款成功
</div> {elseif $vo['refund']==-3 || $vo['refund']==-1}
<div class="order_tz">
退款失败
</div> {/if}
</div> {foreach name="$vo['goods']" item="vo1"}
<a href="{:__URL('APP_MAIN/order/dshdetail/dshdetail?order_id=' . $vo1['order_id'])}">
<div class="order_content_row" onclick="window.location.href='./dshdetail.html';">
<div class="img">
<img mode="true" src="{$vo1.https}{$vo1.img}" />
</div>
<div class="title3">
<div class="name">
{$vo1.goods_name}
</div>
<div class="{$vo1.sku_name!='' ?'ys' :'ys1'}">
{$vo1.sku_name}
</div>
</div>
<div class="price_number">
<div class="price">
￥{$vo1.price}
</div>
<div class="number">
x{$vo1.num}
</div>
</div>
</div> </a> {/foreach}
<div class="oprition_row">
<div class="all">
共{$vo.numbers}件
</div>
<div class="all_price">
合计：
<text class="pricess">
￥{$vo.zong_prices}
</text>
</div>
<div class="delect" bindtap="updateaddress" data-id="{{item.order_id}}">
修改地址
</div> {if $vo['refund']==null}
<div class="zhifu" onclick="Showtk(this)" data-orderid="{$vo.order_id}">
申请退款
</div> {elseif $vo['refund']==1 || $vo['refund']==5 || $vo['refund']==4 || $vo['refund']==-3 || $vo['refund']==-1}
<div class="tuikuan">
申请退款
</div> {/if}
</div>
</div>
</div> {/foreach} {/if}
<input type="hidden" id="more_div3" />
<!--隐藏域：用以存储异步加载偏移量-->
<input type="hidden" id="offect3" value="8" />
<input type="hidden" id="uid" value="{$member_account['uid']}" />
<div class="no-more" style="text-align: center;" id="show_more3"></div>
</div> </li>
<!--待收货-->
<li class="li_list daishouhuo" style="background:#f5f5f5">
<div class="main">
{if $daishouhuo_1=='0'}
<div class="zwdd">
暂无订单！
</div> {else/} {foreach name="$daishouhuo" item="vo"}
<div class="order_row">
<div class="order">
<div class="order_hao_row">
<div class="order_hao">
订单:
<text>
{$vo.order_no}
</text>
</div>
<div class="order_tz">
待收货
</div>
</div> {foreach name="$vo['goods']" item="vo1"}
<a href="{:__URL('APP_MAIN/order/dshdetail/dshdetail?order_id=' . $vo1['order_id'])}">
<div class="order_content_row">
<div class="img">
<img mode="true" src="{$vo1.https}{$vo1.img}" />
</div>
<div class="title3">
<div class="name">
{$vo1.goods_name}
</div>
<div class="{$vo1.sku_name!='' ?'ys' :'ys1'}">
{$vo1.sku_name}
</div>
</div>
<div class="price_number">
<div class="price">
￥{$vo1.price}
</div>
<div class="number">
x{$vo1.num}
</div>
</div>
</div> </a> {/foreach}
<div class="oprition_row">
<div class="all">
共{$vo.numbers}件
</div>
<div class="all_price">
合计：
<text class="pricess">
￥{$vo.zong_prices}
</text>
</div>
<div class="delect_order" onclick="Showsqsh(this)" data-orderid="{$vo['order_id']}">
申请售后
</div>
<div class="delect" onclick="Shows(this)" data-orderid="{$vo.order_id}">
查看物流
</div>
<div class="zhifu" bindtap="qrshouhuo" data-orderid="{{item.order_id}}">
确认收货
</div>
</div>
</div>
</div> {/foreach} {/if}
<input type="hidden" id="more_div4" />
<!--隐藏域：用以存储异步加载偏移量-->
<input type="hidden" id="offect" value="8" />
<input type="hidden" id="uid" value="{$member_account['uid']}" />
<div class="no-more" style="text-align: center;" id="show_more4"></div>
</div> </li>
</div>
<script>
var height= $(window).height();//获取设备高度，不同设备高度不同
var sliderHeight = height - 105;//减去头部的标题高度
setTimeout(function () {
$(".swipe li").height(sliderHeight );
$(".swipe li").css('padding-top','45px');
}, 100);//给元素固定了自适应高度，因为没有高度不能选显卡滑动切换
</script>
<script>
//待发货上拉刷新
$('.daifahuo').scroll(function(){
var scrollTop = $(this).scrollTop();//向上滑动的高度
var scrollHeight = $('.daifahuo > .main').height(); //指定元素内容的高度
var windowHeight = $(this).height(); //设备的高度
if ((scrollTop +windowHeight) >= (scrollHeight)) {
$("#show_more3").html('数据加载中...');
$offect = $("#offect3").val();
$uid = $("#uid").val();
$.post('{:url("api/member/fashouhuo")}',{offect:$offect,uid:$uid}, function(data){
var str =$.parseJSON(data);
if(data != -1){
var to_array = eval("("+data+")");
var str = "";
for(var p in to_array){
str += '<div class="order_row" ><div class="order"><div class="order_hao_row"><div class="order_hao">订单:<text>'+to_array[p].order_no+'</div></text><div class="order_tz">待收货</div></div>';
var valuess=to_array[p].goods;
for (var k in valuess) {
str+='<a href="APP_MAIN/order/dshdetail/dshdetail?order_id='+valuess[k].order_id+'"><div class="order_content_row"><div class="img"><img src='+valuess[k].https+valuess[k].img+'></div><div class="title3"><div class="name">'+valuess[k].goods_name+'</div></div><div class="price_number"><div class="price">￥'+valuess[k].price+'</div><div class="number">x'+valuess[k].num+'</div></div></div></a>';
}
str+='<div class="oprition_row"><div class="all">共'+to_array[p].numbers+'件</div><div class="all_price">合计：<text class="pricess">￥'+to_array[p].zong_prices+'</text></div>'
if(to_array[p].refund==null){
str +='<div class="delect">修改地址</div><div class="zhifu" οnclick="Showtk(this)" data-orderid="'+to_array[p].order_id+'">申请退款</div></div></div></div>';
}
else if(to_array[p].refund==1 || to_array[p].refund==5 || to_array[p].refund==4 || to_array[p].refund==-3 || to_array[p].refund==-1){
str +='<div class="delect">修改地址</div><div class="tuikuan" >申请退款</div></div></div></div>';
}
}
$("#offect3").val($offect*1+8);
$("#more_div3").before(str);
}else{
$("#show_more3").html('没有更多数据了');
}
}, 'json');
}
})
//待收货上拉刷新
$('.daishouhuo').scroll(function(){
var scrollTop = $(this).scrollTop();//向上滑动的高度
var scrollHeight = $('.daishouhuo > .main').height();//指定元素内容的高度
var windowHeight = $(this).height();//设备的高度
console.log(scrollTop);
console.log(windowHeight);
console.log(scrollHeight);
if ((scrollTop +windowHeight) >= (scrollHeight)) {
$("#show_more4").html('数据加载中...');
$offect = $("#offect").val();
$uid = $("#uid").val();
$.post('{:url("api/member/daishouhuo")}',{offect:$offect,uid:$uid}, function(data){
var str =$.parseJSON(data);
if(data != -1){
var to_array = eval("("+data+")");
var str = "";
for(var p in to_array){
str += '<div class="order_row" ><div class="order"><div class="order_hao_row"><div class="order_hao">订单:<text>'+to_array[p].order_no+'</div></text><div class="order_tz">待收货</div></div>';
var valuess=to_array[p].goods;
for (var k in valuess) {
str+='<a href="APP_MAIN/order/dshdetail/dshdetail?order_id='+valuess[k].order_id+'"><div class="order_content_row"><div class="img"><img src='+valuess[k].https+valuess[k].img+'></div><div class="title3"><div class="name">'+valuess[k].goods_name+'</div></div><div class="price_number"><div class="price">￥'+valuess[k].price+'</div><div class="number">x'+valuess[k].num+'</div></div></div></a>';
}
str+='<div class="oprition_row"><div class="all">共'+to_array[p].numbers+'件</div><div class="all_price">合计：<text class="pricess">￥'+to_array[p].zong_prices+'</text></div>'
str +='<div class="delect_order" οnclick="Showsqsh(this)" data-orderid="'+o_array[p].order_id+'">申请售后</div><div class="delect" οnclick="Shows(this)" data-orderid="'+to_array[p].order_id+'">查看物流</div><div class="zhifu">确认收货</div></div></div></div>';
}
$("#offect").val($offect*1+8);
$("#more_div4").before(str);
}else{
$("#show_more4").html('没有更多数据了');
}
}, 'json');
}
})
</script>
</body>
</html>
这种加载方法非常适合像订单列表那样选显卡滑动来上拉加载分页显示出来，
步骤：
1、给每个元素一个自适应的高度
2、给元素绑定滚动事件，不同元素有不同的滚动事件
6329
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
