当前位置： 文江博客 话题详情

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

发布于 2022-09-04 15:52:12 字数 21453 浏览 16 评论 0

并没有错误的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();
        }
    });
}

clipboard.png

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

策马西风 2022-09-11 15:52:12

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

回复
痕至 2022-09-11 15:52:12

建议你debug看下是什么情况

回复
~没有更多了~

关于作者

云之铃。

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文