juliaguo
juliaguo
  • 发布:2016-11-01 11:05
  • 更新:2016-12-30 15:48
  • 阅读:3613

上拉加载下拉刷新与scroll定位结合后出现两个滚动条,怎么破

分类:MUI

代码如下:
<!DOCTYPE html>
<html>

<head>  
    <meta charset="utf-8">  
    <title>test demo</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">  
    <link rel="stylesheet" type="text/css" href="../../css/mui.css" />  
    <style type="text/css">  
        #pullrefresh {  
            top: 0;  
        }  
    </style>  
</head>  

<body>  
    <div class="mui-content">  

        <div id="pullrefresh" class="mui-scroll-wrapper homeforum">  
            <ul id="list" class="mui-table-view mui-scroll mui-table-view-chevron">  
            </ul>  
        </div>  
    </div>  
</body>  
<script type="text/javascript" src="../../js/mui/mui.min.js"></script>  
<script>  
    mui('#pullrefresh').scroll().scrollTo(0, -100, 0);  

    mui.init({  
        pullRefresh: {  
            container: '#pullrefresh',  
            down: {  
                callback: pulldownRefresh  
            },  
            up: {  
                contentrefresh: '正在加载...',  
                callback: pullupRefresh  
            }  
        }  
    });  
    /**  
     * 下拉刷新具体业务实现  
     */  
    function pulldownRefresh() {  
        setTimeout(function() {  
            var table = document.body.querySelector('.mui-table-view');  
            var cells = document.body.querySelectorAll('.mui-table-view-cell');  
            for(var i = cells.length, len = i + 3; i < len; i++) {  
                var li = document.createElement('li');  
                li.className = 'mui-table-view-cell';  
                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                //下拉刷新,新纪录插到最前面;  
                table.insertBefore(li, table.firstChild);  
            }  
            mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed  
        }, 1500);  
    }  
    var count = 0;  
    /**  
     * 上拉加载具体业务实现  
     */  
    function pullupRefresh() {  
        setTimeout(function() {  
            mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。  
            var table = document.body.querySelector('.mui-table-view');  
            var cells = document.body.querySelectorAll('.mui-table-view-cell');  
            for(var i = cells.length, len = i + 20; i < len; i++) {  
                var li = document.createElement('li');  
                li.className = 'mui-table-view-cell';  
                li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>';  
                table.appendChild(li);  
            }  
        }, 1500);  
    }  
    if(mui.os.plus) {  
        mui.plusReady(function() {  
            setTimeout(function() {  
                mui('#pullrefresh').pullRefresh().pullupLoading();  
            }, 1000);  

        });  
    } else {  
        mui.ready(function() {  
            mui('#pullrefresh').pullRefresh().pullupLoading();  
        });  
    }  
</script>  

</html>

2016-11-01 11:05 负责人:无 分享
已邀请:
272324636@qq.com

272324636@qq.com

mui('.mui-scroll-wrapper').scroll({
indicators:false
});
把滚动条禁用即可

该问题目前已经被锁定, 无法添加新回复