1280251121@qq.com
1280251121@qq.com
  • 发布:2019-03-15 15:46
  • 更新:2019-03-15 15:46
  • 阅读:72

页面区域滚动不行

分类:MUI
mui
<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>首页</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <meta name="apple-mobile-web-app-capable" content="yes">  
        <meta name="apple-mobile-web-app-status-bar-style" content="black">  
        <!--标准mui.css-->  
        <link rel="stylesheet" href="../../css/mui.min.css">  
        <link rel="stylesheet" href="../../css/icons-extra.css"/>  
        <script src="../../js/mui.min.js"></script>  
        <script src="../../js/mui.pullToRefresh.js"></script>  
        <script src="../../js/mui.pullToRefresh.material.js"></script>  
    </head>  
    <style>  
        .mui-segmented-control{  
            font-size:1.4rem ;  
        }  
        #p {  
            white: 100%;  
            border: 1px solid #000000;  
            margin: 2px 0;  
            color: #000000;  
            font-size: 1.3rem;  
            padding-left: 1.5%;  
        }  
        #span1 {  
            margin-left: 51%;  
        }  
        table{  
            border:1px solid #000000;  
        }  
        table tr,  
        table td {  
            font-size: 1.3rem;  
            text-align: center;  
            border: 1px solid #000000;  
        }  
    </style>  

    <body>  
        <div id="app" class="mui-content">  
            <header class="mui-bar mui-bar-nav">  
                <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->  
                <h1 class="mui-title" style="font-size: 1.7rem;">首&nbsp;页</h1>  
            </header>  
            <div id="slider" class="mui-slider" >  
                <div class="mui-slider-group mui-slider-loop">  
                <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                      <a href="#"><img src="../../img/assets/u28.jpg"></a>  
                    </div>  
                    <!-- 第一张 -->  
                    <div class="mui-slider-item"><a href="#"><img src="../../img/assets/u28.jpg"></a></div>  
                    <!--第二张-->  
                    <div class="mui-slider-item"><a href="#"><img src="../../img/assets/u28.jpg"></a></div>  
                    <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                      <a href="#"><img src="../../img/assets/u28.jpg"></a>  
                    </div>  
                    <div class="mui-slider-indicator">  
                        <div class="mui-indicator mui-active"></div>  
                        <div class="mui-indicator"></div>  
                    </div>  
                </div>  
            </div>  
            <!--图片下方四个按钮-->  
            <div class="mui-segmented-control">  
                <a class="mui-control-item" href="#item1" onclick="a()">天气</a>  
                <a class="mui-control-item" href="#item2">河道巡逻</a>  
                <a class="mui-control-item" href="#item1">待办事件</a>  
                <a class="mui-control-item" href="#item2">我的关注</a>  
            </div>  
            <p id="p">  
                <span id="span">河道水质</span>  
                <span id="span1" onclick="todetail5" style="color: #0000FF;">所用断面》</span>  
            </p>  
            <p id="p">  
                <span id="span">河道信息</span>  
                <span id="span1" onclick="todetail5" style="color: #0000FF;">所用河道》</span>  
            </p>  
            <table cellspacing="0" cellpadding="0" border="1" width="100%">  
                <tr>  
                    <td>渭河</td>  
                    <td>泾河</td>  
                    <td>黑河</td>  
                    <td>捞河</td>  
                </tr>  
                <tr>  
                    <td>渭河</td>  
                    <td>泾河</td>  
                    <td>黑河</td>  
                    <td>捞河</td>  
                </tr>  
                <tr>  
                    <td>渭河</td>  
                    <td>泾河</td>  
                    <td>黑河</td>  
                </tr>  
            </table>  
            <p id="p">  
                <span id="span">湖泊信息</span>  
                <span id="span1" @click="todetail6" style="color: #0000FF;">所用湖泊》</span>  
            </p>  
            <table cellspacing="0" cellpadding="0" border="1" width="100%">  
                <tr>  
                    <td>大湖</td>  
                    <td>泾河大湖</td>  
                    <td>大湖黑河</td>  
                    <td>大湖捞河</td>  
                </tr>  
                <tr>  
                    <td>大湖</td>  
                    <td>大泾河</td>  
                    <td>黑河大湖</td>  
                    <td>捞河大湖</td>  
                </tr>  
            </table>  
            <p id="p">  
                <span id="span">河道事件</span>  
                <span id="span1"style="color: #0000FF;">所用事件》</span>  
            </p>  
            <div>  
                <div style="float: left;font-size:1.2rem;">编号:XY-123456</div>  
                <div style="float:right;color: #0000FF;font-size:1.2rem;">  
                    <div style="float:right;color:#4CAF50;">未处理</div>  
                    已处理中/  
                </div>  
            </div>  
            <div class="mui-slider-group">  
                <!--第一个选项卡-->  
                <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  
                    <div id="scroll1" class="mui-scroll-wrapper">  
                        <div class="mui-scroll">  
                            <ul class="mui-table-view">  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-1  
                                </li>  
                                <li class="mui-table-view-cell">  
                                        第1个选项卡子项-2  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-3  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-4  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-5  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-6  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-7  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-8  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-9  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-10  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-11  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-12  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-13  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-14  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-15  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-16  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-17  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-18  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-19  
                                </li>  
                                <li class="mui-table-view-cell">  
                                    第1个选项卡子项-20  
                                </li>  
                            </ul>  
                        </div>  
                    </div>  
                </div>  
            </div>  
        </div>  
    </body>  
    <script>  
        mui.init();  
        function a() {  
            mui.openWindow('HOME-Two/tianqi.html', 'a1', {});  
        }   
        (function($) {  
                //阻尼系数  
                var deceleration = mui.os.ios ? 0.003 : 0.0009;  
                $('.mui-scroll-wrapper').scroll({  
                    bounce: false,  
                    indicators: true, //是否显示滚动条  
                    deceleration: deceleration  
                });  
                $.ready(function() {  
                    //循环初始化所有下拉刷新,上拉加载。  
                    $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {  
                        $(pullRefreshEl).pullToRefresh({  
                            down: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        var ul = self.element.querySelector('.mui-table-view');  
                                        ul.insertBefore(createFragment(ul, index, 10, true), ul.firstChild);  
                                        self.endPullDownToRefresh();  
                                    }, 1000);  
                                }  
                            },  
                            up: {  
                                callback: function() {  
                                    var self = this;  
                                    setTimeout(function() {  
                                        var ul = self.element.querySelector('.mui-table-view');  
                                        ul.appendChild(createFragment(ul, index, 10));  
                                        self.endPullUpToRefresh();  
                                    }, 1000);  
                                }  
                            }  
                        });  
                    });  
                    var createFragment = function(ul, index, count, reverse) {  
                        var length = ul.querySelectorAll('li').length;  
                        var fragment = document.createDocumentFragment();  
                        var li;  
                        for(var i = 0; i < count; i++) {  
                            li = document.createElement('li');  
                            li.className = 'mui-table-view-cell';  
                            li.innerHTML = '第' + (index + 1) + '个选项卡子项-' + (length + (reverse ? (count - i) : (i + 1)));  
                            fragment.appendChild(li);  
                        }  
                        return fragment;  
                    };  
                });  
            })(mui);  
    </script>  

</html>  
2019-03-15 15:46 分享
已邀请:

要回复问题请先登录注册