css - 写的移动页面不能向下滑了><求大神指点

问题描述

并没有错误的overflow:hidden不知道为什么开始写静态的是可以下拉刷新的 现在加了动态的数据就不行了

求大神

@{ ViewBag.Title = '订单列表';}@section HeaderContent{ <link rel='stylesheet' href='https://www.haobala.com/Content/swiper-3.4.2.min.css'> <link rel='stylesheet' href='https://www.haobala.com/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='https://www.haobala.com/Scripts/swiper-3.4.2.jquery.min.js'></script> <script type='text/javascript' src='https://www.haobala.com/Scripts/fastclick.js'></script> <script type='text/javascript' src='https://www.haobala.com/Scripts/iscroll-probe.js'></script> <script type='text/javascript' src='https://www.haobala.com/Scripts/jquery.linq.min.js'></script> <script type='text/javascript' src='https://www.haobala.com/Scripts/Common.js'></script> <script type='text/javascript' src='https://www.haobala.com/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看下是什么情况