【CSS】写的移动页面不能向下滑了><求大神指点
并没有错误的overflow:hidden不知道为什么
开始写静态的是可以下拉刷新的 现在加了动态的数据就不行了
求大神
@{ ViewBag.Title = "订单列表";
}
@section HeaderContent{
<link rel="stylesheet" href="/Content/swiper-3.4.2.min.css">
<link rel="stylesheet" href="/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="/Scripts/swiper-3.4.2.jquery.min.js"></script>
<script type="text/javascript" src="/Scripts/fastclick.js"></script>
<script type="text/javascript" src="/Scripts/iscroll-probe.js"></script>
<script type="text/javascript" src="/Scripts/jquery.linq.min.js"></script>
<script type="text/javascript" src="/Scripts/Common.js"></script>
<script type="text/javascript" src="/ViewScript/Order/Index.js"></script>
}
<div id="header">
我的订单
</div>
<div id="searchBox">
<input type="text" id="txtSearch" placeholder="商品名称/商品编号/订单号">
</div>
<div id="nav">
<ul>
<li class="active">待配送</li>
<li>配送中</li>
<li>未结清</li>
<li>已完成</li>
</ul>
</div>
<div id="requestf5" style="display:none">正在刷新</div>
<div class="swiper-container content">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div id="wrapper1" class="wrapper">
<div id="scroller1" class="scroller">
<div class="demo" id="divOrder1">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div id="wrapper2" class="wrapper">
<div id="scroller2">
<div class="demo" id="divOrder2">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div id="wrapper3" class="wrapper">
<div id="scroller3">
<div class="demo" id="divOrder3">
</div>
</div>
</div>
</div>
<div class="swiper-slide">
<div id="wrapper4" class="wrapper">
<div id="scroller4">
<div class="demo" id="divOrder4">
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footer"></div>
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, "divOrder1");
handle1 = 0; //重设为0，改为无状态
} else if (handle1 == 2) { //上拉刷新处理
GetOrderList(1, myScroll1, "divOrder1");
handle1 = 0; //重设为0，改为无状态
} else {
handle1 = 0;
};
});
myScroll2.on('scrollEnd', function () {
if (handle2 == 1) { //下拉刷新处理
GetOrderList(2, myScroll2, "divOrder2");
handle2 = 0; //重设为0，改为无状态
} else if (handle2 == 2) { //上拉刷新处理
GetOrderList(2, myScroll2, "divOrder2");
handle2 = 0; //重设为0，改为无状态
} else {
handle2 = 0;
};
});
myScroll3.on('scrollEnd', function () {
if (handle3 == 1) { //下拉刷新处理
GetOrderList(3, myScroll3, "divOrder3");
handle3 = 0; //重设为0，改为无状态
} else if (handle3 == 2) { //上拉刷新处理
GetOrderList(3, myScroll3, "divOrder3");
handle3 = 0; //重设为0，改为无状态
} else {
handle3 = 0;
};
});
myScroll4.on('scrollEnd', function () {
if (handle4 == 1) { //下拉刷新处理
GetOrderList(4, myScroll4, "divOrder4");
handle4 = 0; //重设为0，改为无状态
} else if (handle4 == 2) { //上拉刷新处理
GetOrderList(4, myScroll4, "divOrder4");
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, "divOrder1");
});
//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, divOrder) {
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'><div class='listBox'> <div 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></div>";
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 += "<div class='orderContent'>";
$(details).each(function (j) {
var img = "";
if (details[j].Images != null && details[j].Images != "") {
img = details[j].Images.split(" ")[0];
}
orderstrs += "<div 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></div>";
});
}
orderstrs += "</div>";
}
orderstrs += "<div 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></div></div></a>";
orderstrs += "<div class='handle'><button class='btn-default'>致电业务员</button><button class='btn-primary'>确认收货</button></div>";
if (direction == 1)
$("#" + divOrder).append(orderstrs);
else
$("#" + divOrder).prepend(orderstrs);
});
}
scrollobj.refresh();
}
});
}
回答：
没有布局我也不太清楚，可能是父元素缺了定位属性，或者没有固定高度的原因(以前遇到过)，就不知道你是不是了
回答：
建议你debug看下是什么情况
以上是 【CSS】写的移动页面不能向下滑了><求大神指点 的全部内容， 来源链接： utcz.com/a/154206.html
