問題描述

并沒有錯誤的overflow:hidden不知道為什么開始寫靜態的是可以下拉刷新的 現在加了動態的數據就不行了

求大神

@{ ViewBag.Title = '訂單列表';}@section HeaderContent{ <link rel='stylesheet' href='http://m.propowerdrill.cn/Content/swiper-3.4.2.min.css'> <link rel='stylesheet' href='http://m.propowerdrill.cn/Content/index.css'> <style type='text/css'>#footer { z-index: 2; width: 100%; height: 3px; opacity: 0; background: #444; position:fixed; bottom:0px;} </style>}@section scripts { <script type='text/javascript' src='http://m.propowerdrill.cn/Scripts/swiper-3.4.2.jquery.min.js'></script> <script type='text/javascript' src='http://m.propowerdrill.cn/Scripts/fastclick.js'></script> <script type='text/javascript' src='http://m.propowerdrill.cn/Scripts/iscroll-probe.js'></script> <script type='text/javascript' src='http://m.propowerdrill.cn/Scripts/jquery.linq.min.js'></script> <script type='text/javascript' src='http://m.propowerdrill.cn/Scripts/Common.js'></script> <script type='text/javascript' src='http://m.propowerdrill.cn/ViewScript/Order/Index.js'></script>}<p id='header'> 我的訂單</p><p id='searchBox'> <input type='text' placeholder='商品名稱/商品編號/訂單號'></p><p id='nav'> <ul><li class='active'>待配送</li><li>配送中</li><li>未結清</li><li>已完成</li> </ul></p><p style='display:none'>正在刷新</p><p class='swiper-container content'> <p class='swiper-wrapper'><p class='swiper-slide'> <p class='wrapper'><p class='scroller'> <p id='pOrder1'> </p></p> </p></p><p class='swiper-slide'> <p class='wrapper'><p id='scroller2'> <p id='pOrder2'> </p></p> </p></p><p class='swiper-slide'> <p class='wrapper'><p id='scroller3'> <p id='pOrder3'> </p></p> </p></p><p class='swiper-slide'> <p class='wrapper'><p id='scroller4'> <p id='pOrder4'> </p></p> </p></p> </p></p><p id='footer'></p>

body,html { padding: 0; margin: 0; font-size: 100px; /* position: relative;*/}a{ color: #000;}ul { list-style: none; padding: 0; margin: 0;}.linkDetail { display: block; width: auto; height: auto; cursor: pointer;}#header { width: 100%; height: .6rem; background: #000; color: #fff; text-align: center; line-height: .6rem; font-size: .25rem;}#searchBox { font-size: .14rem;}#searchBox { width: 100%; height: .6rem; background: #e1e1e1; font-size: .14rem; box-sizing: padding-box;}#searchBox input { width: calc(100% - .2rem); height: .4rem; margin: .1rem; padding: 0; border: none; border-radius: .4rem; background-size: .3rem .3rem; background-repeat: no-repeat; background-image: url(/images/search.png); background-position: .05rem .05rem; text-align: center;}#searchBox input::-webkit-input-placeholder { font-size: .12rem; padding-left: .3rem;}#nav { width: 100%; height: .5rem; background: #eee; font-size: .18rem;}#nav ul { list-style: none; padding: 0; margin: 0;}#nav ul li { width: 24%; height: .5rem; display: inline-block; line-height: .5rem; text-align: center;}#nav ul li.active { box-sizing: border-box; color: #0099FF; border-bottom: 1px solid #0099FF; margin-bottom: -1px;}/*一個訂單內容的盒子*/.listBox { width: 100%; /* height: 1rem;*/ /*overflow: hidden;*/ border-bottom: 8px solid #e1e1e1; border-top: 8px solid #e1e1e1;}.listBox .orderHeader { width: 100%; height: .5rem; border-bottom: 1px solid #eee; font-size: .14rem;}.listBox .orderHeader ul { width: 60%; height: .5rem; float: left;}.listBox .orderHeader ul li { display: block; float: left; width: auto; height: .5rem; line-height: .5rem;}.listBox .orderHeader ul li img { width: .34rem; height: .34rem; padding: .07rem;}.listBox .orderHeader ul li .orderCode { display: inline-block; height: .5rem; line-height: .5rem;}.listBox .orderHeader .orderTime { width: 40%; height: .5rem; line-height: .5rem; box-sizing: border-box; padding-right: .1rem; text-align: right; display: block; float: left;}/*包含的產品內容*/.listBox .orderContent { width: 100%; height: auto; /*overflow: hidden;*/ border-bottom: 1px solid #e1e1e1;}.listBox .orderContent .orderDetailBox { width: 100%; height: auto; overflow: hidden; font-size: .14rem;}/*單個產品的詳情*/.orderDetailBox .productImg { width: 1.1rem; height: .8rem; background: cover; float: left; padding: .1rem;}.orderDetailBox .productName { display: block; width: 1.5rem; height: 1rem; line-height: 1rem; float: left; font-size: .16rem;}.orderDetailBox ul { width: calc(100% - 2.85rem); float: left; padding: .1rem .1rem .1rem 0; box-sizing: border-box;}.orderDetailBox ul li { width: 100%; height: .4rem; line-height: .4rem; box-sizing: padding-box; text-align: right; overflow: hidden;}.orderDetailBox ul li .unitPrice { display: inline-block; width: auto; float: right; height: auto; line-height: .4rem;}.orderDetailBox ul li .num { display: inline-block; width: auto; float: right; height: .4rem; line-height: .4rem;}/*統計*/.statis { width: 100%; height: .5rem; border-bottom: 1px solid #e1e1e1; padding-right: .1rem; font-size: .16rem;}.statis ul li { float: right; width: auto; height: .5rem; line-height: .5rem; padding-right: .1rem;}/*操作*/.handle { font-size: .12rem; width: 100%; height: .7rem; padding-right: .1rem;}.handle button { width: auto; height: .4rem; background: none; border-radius: 5px; margin: .15rem .05rem; float: right;}.btn-default { border: 1px solid #e1e1e1;}.btn-primary { border: 1px solid #e1e1e1;}

Enumerable = $.Enumerable;var pageIndex1 = 1, pageIndex2 = 1, pageIndex3 = 1, pageIndex4 = 1;var startMaxNum1 = 0, startMaxNum2 = 0, startMaxNum3 = 0, startMaxNum4 = 0;var startMinNum1 = 0, startMinNum2 = 0, startMinNum3 = 0, startMinNum4 = 0;var handle1 = 0, handle2 = 0, handle3 = 0, handle4 = 0; //初始為0，無狀態；1表示下拉，2表示上拉var myScroll1, myScroll2, myScroll3, myScroll4;$(function () { var requestf5 = document.getElementById('requestf5'); myScroll1 = new IScroll(’#wrapper1’, {mouseWheel: true, //是否監聽鼠標滾輪事件bounceTime: 500, //彈力動畫持續的毫秒數probeType: 3 }); myScroll2 = new IScroll(’#wrapper2’, {mouseWheel: true, //是否監聽鼠標滾輪事件bounceTime: 500, //彈力動畫持續的毫秒數probeType: 3 }); myScroll3 = new IScroll(’#wrapper3’, {mouseWheel: true, //是否監聽鼠標滾輪事件bounceTime: 500, //彈力動畫持續的毫秒數probeType: 3 }); myScroll4 = new IScroll(’#wrapper4’, {mouseWheel: true, //是否監聽鼠標滾輪事件bounceTime: 500, //彈力動畫持續的毫秒數probeType: 3 }); myScroll1.on(’scroll’, function () {if (this.y > 5) { //下拉刷新效果 ，標識設置為1 handle1 = 1; if (this.y > 20) {requestf5.style.opacity = 1; } else {requestf5.style.opacity = 0; };} else if (this.y < (this.maxScrollY - 5)) { //上拉刷新效果 ，表示設置為2 handle1 = 2;}; }); myScroll2.on(’scroll’, function () {if (this.y > 5) { //下拉刷新效果 ，標識設置為1 handle2 = 1; if (this.y > 20) {requestf5.style.opacity = 1; } else {requestf5.style.opacity = 0; };} else if (this.y < (this.maxScrollY - 5)) { //上拉刷新效果 ，表示設置為2 handle2 = 2;}; }); myScroll3.on(’scroll’, function () {if (this.y > 5) { //下拉刷新效果 ，標識設置為1 handle3 = 1; if (this.y > 20) {requestf5.style.opacity = 1; } else {requestf5.style.opacity = 0; };} else if (this.y < (this.maxScrollY - 5)) { //上拉刷新效果 ，表示設置為2 handle3 = 2;}; }); myScroll4.on(’scroll’, function () {if (this.y > 5) { //下拉刷新效果 ，標識設置為1 handle4 = 1; if (this.y > 20) {requestf5.style.opacity = 1; } else {requestf5.style.opacity = 0; };} else if (this.y < (this.maxScrollY - 5)) { //上拉刷新效果 ，表示設置為2 handle4 = 2;}; }); myScroll1.on(’scrollEnd’, function () {if (handle1 == 1) { //下拉刷新處理 GetOrderList(1, myScroll1, 'pOrder1'); handle1 = 0; //重設為0，改為無狀態} else if (handle1 == 2) { //上拉刷新處理 GetOrderList(1, myScroll1, 'pOrder1'); handle1 = 0; //重設為0，改為無狀態} else { handle1 = 0;}; }); myScroll2.on(’scrollEnd’, function () {if (handle2 == 1) { //下拉刷新處理 GetOrderList(2, myScroll2, 'pOrder2'); handle2 = 0; //重設為0，改為無狀態} else if (handle2 == 2) { //上拉刷新處理 GetOrderList(2, myScroll2, 'pOrder2'); handle2 = 0; //重設為0，改為無狀態} else { handle2 = 0;}; }); myScroll3.on(’scrollEnd’, function () {if (handle3 == 1) { //下拉刷新處理 GetOrderList(3, myScroll3, 'pOrder3'); handle3 = 0; //重設為0，改為無狀態} else if (handle3 == 2) { //上拉刷新處理 GetOrderList(3, myScroll3, 'pOrder3'); handle3 = 0; //重設為0，改為無狀態} else { handle3 = 0;}; }); myScroll4.on(’scrollEnd’, function () {if (handle4 == 1) { //下拉刷新處理 GetOrderList(4, myScroll4, 'pOrder4'); handle4 = 0; //重設為0，改為無狀態} else if (handle4 == 2) { //上拉刷新處理 GetOrderList(4, myScroll4, 'pOrder4'); handle4 = 0; //重設為0，改為無狀態} else { handle4 = 0;}; }); var mySwiper = new Swiper(’.swiper-container’, {onTransitionEnd: function (swiper) { $(’#nav li’).eq(mySwiper.activeIndex).addClass(’active’).siblings().removeClass(’active’);} }); $(’#nav li’).click(function () {$(this).addClass(’active’).siblings().removeClass(’active’);mySwiper.slideTo($(this).index(), 500) }); //單指拖動 雙指縮放 // var touchScale = function(seletor, bg) { // var startX, endX, scale, x1, x2, y1, y2, imgLeft, imgTop, imgWidth, imgHeight, // one = false, // $touch = $(seletor), // originalWidth = $touch.width(), // originalHeight = $touch.height(), // baseScale = parseFloat(originalWidth/originalHeight), // imgData = [], // bgTop = parseInt($(bg).css(’top’)); // function siteData(name) { // imgLeft = parseInt(name.css(’left’)); // imgTop = parseInt(name.css(’top’)); // imgWidth = name.width(); // imgHeight = name.height(); // } // $(document).on(’touchstart touchmove touchend’, $(seletor).parent().selector, function(event){ // var $me = $(seletor), // touch1 = event.originalEvent.targetTouches[0], // 第一根手指touch事件 // touch2 = event.originalEvent.targetTouches[1], // 第二根手指touch事件 // fingers = event.originalEvent.touches.length; // 屏幕上手指數量 // //手指放到屏幕上的時候，還沒有進行其他操作 // if (event.type == ’touchstart’) { // if (fingers == 2) { // // 縮放圖片的時候X坐標起始值 // startX = Math.abs(touch1.pageX - touch2.pageX); // one = false; // } // else if (fingers == 1) { // x1 = touch1.pageX; // y1 = touch1.pageY; // one = true; // } // siteData($me); // } // //手指在屏幕上滑動 // else if (event.type == ’touchmove’) { // if (fingers == 2) { // // 縮放圖片的時候X坐標滑動變化值 // endX = Math.abs(touch1.pageX - touch2.pageX); // scale = endX - startX; // $me.css({ // ’width’ : originalWidth + scale, // ’height’ : (originalWidth + scale)/baseScale, // ’left’ : imgLeft, // ’top’ : imgTop // }); // // }else if (fingers == 1) { // x2 = touch1.pageX; // y2 = touch1.pageY; // if (one) { // $me.css({ // ’left’ : imgLeft + (x2 - x1), // ’top’ : imgTop + (y2 - y1) // }); // } // } // } // //手指移開屏幕 // else if (event.type == ’touchend’) { // // 手指移開后保存圖片的寬 // originalWidth = $touch.width(), // siteData($me); // imgData = [[imgLeft, imgTop-bgTop, imgWidth, imgHeight],[0, 0, 640, 640]]; // } // }); // var getData = function(){ // return imgData; // }; // return { // imgData : getData // } // }; FastClick.attach(document.body); GetOrderList(1, myScroll1, 'pOrder1');});//rem布局動態修改html font-size(function (doc, win) { var docEl = doc.documentElement,resizeEvt = ’orientationchange’ in window ? ’orientationchange’ : ’resize’,recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if (clientWidth >= 640) {docEl.style.fontSize = ’100px’; } else {docEl.style.fontSize = 100 * (clientWidth / 640) + ’px’; }}; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(’DOMContentLoaded’, recalc, false);})(document, window);function GetOrderList(status, scrollobj, pOrder) { var direction = 1, startNum = 0; if (status == 1) {if (handle1 == 1) { startNum = startMaxNum1; direction = 2;}else startNum = startMinNum1; } else if (status == 2) {if (handle2 == 1) { startNum = startMaxNum3; direction = 2;} else { startNum = startMinNum2;} } else if (status == 3) {if (handle3 == 1) { startNum = startMaxNum3; direction = 2;}else startNum = startMinNum3; } else {if (handle4 == 1) { startNum = startMaxNum4; direction = 2;}else startNum = startMinNum4; } $.post(’/order/GetOrderListByCondition’, { keyWord: $.trim($('#txtSearch').val()), status: status, direction: direction, startNum: startNum }, function (data) {if (data != null) { if (data.Orders.length >= 1) {if (direction == 1) { if (status == 1) {if (startMaxNum1 == 0) { startMaxNum1 = data.Orders[0].Id;}startMinNum1 = data.Orders[data.Orders.length - 1].Id; } else if (status == 2) {if (startMaxNum2 == 0) { startMaxNum2 = data.Orders[0].Id;}startMinNum2 = data.Orders[data.Orders.length - 1].Id; } else if (status == 3) {if (startMaxNum3 == 0) { startMaxNum3 = data.Orders[0].Id;}startMinNum3 = data.Orders[data.Orders.length - 1].Id; } else if (status == 4) {if (startMaxNum4 == 0) { startMaxNum4 = data.Orders[0].Id;}startMinNum4 = data.Orders[data.Orders.length - 1].Id; }} else { if (status == 1) {if (startMinNum1 == 0) { startMinNum1 = data.Orders[data.Orders.length - 1].Id;}startMaxNum1 = data.Orders[0].Id; } else if (status == 2) {if (startMinNum2 == 0) { startMinNum2 = data.Orders[data.Orders.length - 1].Id;}startMaxNum2 = data.Orders[0].Id; } else if (status == 3) {if (startMinNum3 == 0) { startMinNum3 = data.Orders[data.Orders.length - 1].Id;}startMaxNum3 = data.Orders[0].Id; } else if (status == 4) {if (startMinNum4 == 0) { startMinNum4 = data.Orders[data.Orders.length - 1].Id;}startMaxNum4 = data.Orders[0].Id; }}$(data.Orders).each(function (i) { var orderstrs = '<a href=’/order/orderdetail?orderid=' + data.Orders[i].Id + '’ class=’linkDetail’><p class=’listBox’> <p class=’orderHeader’><ul><li><img src=’/images/list.png’></li><li>訂單號：<span data-name=’orderCode’ class=’orderCode’>' + data.Orders[i].OrderCode + '</span></li></ul><span class=’orderTime’ data-name=’orderTime’>' + ToJavaScriptDate(data.Orders[i].OrderTime) + '</span></p>'; if (data.OrdersDetail.length >= 1) {var details = Enumerable.From(data.OrdersDetail).Where('x=>x.OrderId==' + data.Orders[i].Id).ToArray();if (details != null && details.length >= 1) { orderstrs += '<p class=’orderContent’>'; $(details).each(function (j) {var img = '';if (details[j].Images != null && details[j].Images != '') { img = details[j].Images.split(' ')[0];}orderstrs += '<p class=’orderDetailBox’><img class=’productImg’ src=’' + img + '’><span class=’productName’ data-name=’productName’>' + details[j].ProductName + '</span><ul><li>￥<span class=’unitPrice’ data-name=’unitPrice’>' + details[j].UnitPrice + '</li><li>×<span class=’num’ data-name=’num’>' + details[j].Num + '</span></li></ul></p>'; });}orderstrs += '</p>'; } orderstrs += '<p class=’statis’><ul><li>共<span class=’productCount’ data-name=’productCount’>' + data.Orders[i].ProductCount + '</span>件商品</li><li>合計：￥<span class=’payAmount’ data-name=’payAmount’>' + data.Orders[i].PayAmount + '</span></li></ul></p></p></a>'; orderstrs += '<p class=’handle’><button class=’btn-default’>致電業務員</button><button class=’btn-primary’>確認收貨</button></p>'; if (direction == 1)$('#' + pOrder).append(orderstrs); else$('#' + pOrder).prepend(orderstrs);}); } scrollobj.refresh();} });}

問題解答

沒有布局我也不太清楚，可能是父元素缺了定位屬性，或者沒有固定高度的原因(以前遇到過)，就不知道你是不是了

建議你debug看下是什么情況