iscroll pc端正常拉动 手机端异常

ousiew 发布于 2017/03/08 14:36
阅读 300
收藏 0

代码部分---------------

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>找货</title>
<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no">
<link rel="stylesheet" type="text/css" href="../static/home/mobile/css/css.css" />
<script src="../static/home/js/layer_mobile/layer.js"></script>
<script src="../static/home/mobile/js/jquery.js"></script>
<script src="../static/home/mobile/js/swiper.min.js"></script>
<script src="../static/home/mobile/js/iscroll.js"></script>

</head>

<body>
<div class="header">
    <a href="javascript:history.go(-1);"><img src="../static/home/mobile/images/return.png"></a>
    <h2>找货</h2>
   <a href="#"><img src="../static/home/mobile/images/zh1.png" class="zh1"></a>
   <!--<img src="images/map.png" class="zh2">-->
</div>

<div class="zh-select" >
    <label  class="label">
        <input type="text" placeholder="发货地" class="s-input" readonly><img src="../static/home/mobile/images/sanjiao.png"></label>
    </label>
    <label  class="label">
        <input type="text" placeholder="卸货地" class="s-input" readonly><img src="../static/home/mobile/images/sanjiao.png"></label>
    </label>
    <label  class="label">
        <input type="text" placeholder="价格" class="s-input" readonly><img src="../static/home/mobile/images/sanjiao.png"></label>
    </label>
    <label  class="label">
        <input type="text" placeholder="时间" class="s-input" readonly><img src="../static/home/mobile/images/sanjiao.png"></label>
    </label>
</div>
        
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownIcon"></span><span class="pullDownLabel">下拉重新加载页面</span>
        </div>
<div class="zh-cnt"  id="getmore">
 <#list page  as  orderlo> 
    <div class="cnt">
        <div class="cnt_top">
            <span class="top_span"> ${orderlo.fromb}${orderlo.froms}</span>
            <span>至</span>
            <span class="top_span">${orderlo.tob}${orderlo.tos}</span>
            <div class="clearfix"></div>
        </div>
        <div class="cnt_bot">
            <div class="cnt_left">
                <img src="../static/home/mobile/images/logo.png">
            </div>
            <div class="cnt_mid">
                <div><span class="span_time">发货时间:${orderlo.thsj}&nbsp;至&nbsp;${orderlo.pstime}</span>   <span> 距离:<#if (orderlo.kinds)??>
                         ${orderlo.kinds}
                      </#if>公里</span></div>
                <div>   <span>  付款方式:${orderlo.payway?default('未填写')},${orderlo.paytime?default('未填写')},${orderlo.ifticket?default('未填写')}       </span>  </div>
                <div>
                    <span>装卸费:${orderlo.zxprice}/车</span>
                    <span>价格:<em style="color:#ff756b; text-decoration:none; font-size:.36rem">${orderlo.ysprice}</em>元/吨</span>
                </div>
                 <a href="#" class="cnt_a" onclick="pupopen('${orderlo.id}')">抢单</a>
            </div>
            <div class="clearfix"></div>
        </div>
     </div>
        </#list>
    
</div>
        <div id="pullUp">
            <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
        </div>
    </div>
</div>
    <div class="more" style="text-align:center"><a href="javascript:void(0)" onclick="getMore()">点击加载更多</a></div>
<div style="height:1rem; width:100%" class="clearfix"></div>
<#include "/bottommeun.html">

 
<script type="text/javascript">

var myScroll,
pullDownEl, pullDownOffset,
pullUpEl, pullUpOffset,
generatedCount = 0;

function pullDownAction () { // 下拉刷新
    window.location.reload();
}

function pullUpAction () {
    var el;
    el = document.getElementById('wrapper');
    getMore();
    
    
    myScroll.refresh();        // Remember to refresh when contents are loaded (ie: on ajax completion)
}

function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');    
    pullUpOffset = pullUpEl.offsetHeight;
    
    myScroll = new iScroll('wrapper', {
        useTransition: true,
        topOffset: pullDownOffset,
        btnOffset: pullUpOffset,
        onRefresh: function () {
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
            } else if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
            }
        },
        onScrollMove: function () {
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '松开刷新...';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                this.minScrollY = -pullDownOffset;
            } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '松开刷新...';
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';                
                pullDownAction();    // Execute custom function (ajax call?)
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';                
                pullUpAction();    // Execute custom function (ajax call?)
            }
        }
    });
    
    setTimeout(function () { document.getElementById('getmore').style.left = '0'; }, 800);
}
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    
    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
page1 = 1; 
function getMore() {

    
    $.getJSON("/mobile/selectOrdermore", {page: page1,type:'1'}, function(json) { 
    
         if (json !=null && json !='') { 
            
            var str = "";  
            var ind="";
            $.each(json, function(index, array) {  
                var str = "  <div class=\"cnt\">";                
                    var str = str + "<div class=\"cnt_top\">";                   
                    var str = str + " <span class=\"top_span\"> " + array['fromb'] + "-" + array['froms'] + "</span>";
                    var str = str + "    <span>至</span>";
                    var str = str + " <span class=\"top_span\"> " + array['tob'] + "-" + array['tos'] + "</span>";                    
                    var str = str + " <div class=\"clearfix\"></div></div>";
                    var str = str + "   <div class=\"cnt_bot\"> <div class=\"cnt_left\">" ;
                    var str = str + "  <img src=\"/static/home/mobile/images/logo.png\">"; 
                    var str = str + "  </div> <div class=\"cnt_mid\">";                  
                    var str = str + "  <div>发货时间:" + array['thsj'] +"&nbsp;&nbsp;至&nbsp;&nbsp;"+array['pstime']+"</span>"+"<span> 距离:" +array['kinds']+"</span></div>"
                    var str = str + "    <div><span>需求车辆:"+array['xqton']+"辆</span>"+"<span> 付款方式:" +array['payway']+array['paytime']+array['ifticket']   +"</span></div> <div>";
                    var str = str + "    <span>装卸费:"+array['zxprice']+"/车</span>";
                    var str = str + "  <span>价格:<em style=\"color:#ff756b; text-decoration:none; font-size:.36rem\"> " + array['ysprice'] + "</em>元/吨</span>";
                    var str = str + "  </div>";
                    var str = str + "<a href=\"javascript:;\"  class=\"cnt_a\"  onclick=\"pupopen('" + array['id'] + "')\" >抢单</a>";          
                    var str = str + "   </div> <div class=\"clearfix\"></div> </div> </div> ";
               
                $("#getmore").append(str); 
                ind=index;
                
            });  
            page1++; 
            if(ind <2){
                layer.open({
                       content: '没有更多数据啦。。。'
                       ,skin: 'msg'
                       ,time: 2 //2秒后自动关闭
                     });
                $('.more').html("<a href=\"javascript:void(0)\">没有更多数据啦</a>");
          }
        } else {  
           //提示
       $('.more').html("<a href=\"javascript:void(0)\">没有更多数据啦</a>");
             layer.open({
               content: '没有更多数据啦。。。'
               ,skin: 'msg'
               ,time: 2 //2秒后自动关闭
             });
            return false;  
        }  
     
    }); 
}
 
 
 
</script>
 
 
 
 
 

<script type="text/javascript">

function checkorder(hyid){

      $.ajax({
          url:"/mobile/checkorder?orderid="
              + hyid,
          
        
           dataType: "json",
           success:function(data)
           {
           var objs = eval(data);
           
           var fag=objs[0].fag;
           var diversize=objs[0].diversize;
         
           if(fag=='2'){
               if(diversize=='0'){
                   var type='1';
                   window.location="/mobile/driveraddsend?hyid="+hyid+"&type="+type;//添加抢货信息并添加车辆信息并派送                 
               }else if(diversize=='1'){
                   window.location="/mobile/qhsucess?orderhyid="+hyid;//有车辆信息时 直接派车  
               }
           
          }
            else  if(fag=='1'){
                   layer.open({
                        content: '自己发布的货源自己不能抢单'
                        ,btn: '我知道了'
                      });
              
           }
         
               }

        });
 }
     
</script>
 
 
 
 
 
 
<script type="text/javascript">
     function pupopen(id){
         window.location="/mobile/getOrderbyId?orderid="+ id;
          
      }
</script>
<div style="height:1rem; width:100%" class="clearfix"></div>
<#include "/bottommeun.html">
</body>
</html>
 

 

 

加载中
返回顶部
顶部