1***@qq.com
1***@qq.com
  • 发布:2016-11-16 11:55
  • 更新:2016-11-16 17:03
  • 阅读:7259

mui-scroll-wrapper滚动条去不掉,初始化了却不能滚动了

分类:MUI

看附图,红圈里面的滚动条,始终去不掉。demo:下拉刷新,上拉加载,头部slider轮播,使用了mui-scroll-wrapper,设置
$('.mui-scroll-wrapper').scroll({
bounce: false,
indicators: false, //是否显示滚动条
deceleration:deceleration
}); 滚动条不但没消失,连滚动都不能滚动了,求解决!!!!!!!!!!!!!!

以下为部分代码:
<body>
<header id="header" class="mui-bar mui-bar-nav own-homepae-title-transparent-color">
<a class="mui-icon mui-icon-contact mui-pull-left own-homepae-title-text-color" style="color:#63A7F2;"></a>
<h1 class="mui-title own-homepae-title-text-color" style="color:#63A7F2;font-size: 20px;">新闻</h1>
</header>
<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="background: #fff">
<div id="scroll" class="mui-scroll" style="margin-top: -45px;">
<div class="mui-content" style="background: #F1F1F1;">
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<div class='mui-slider-item mui-slider-item-duplicate'>
<a>
<img src='../img/default.jpg'>
<p class='mui-slider-title'>暂无数据</p>
</a>
</div>
</div>
<div class="mui-slider-indicator mui-text-right">
<div class='mui-indicator mui-active'></div>
</div>
</div>
<div id="adver_title"></div>
</div>

            <div class="mui-content" style="margin-top: -15px;">  
                <ul id="news-list" class="mui-table-view">  
                    <li id="nullData" class='mui-table-view-cell mui-media'>  
                        <a>  
                            <img class='mui-media-object mui-pull-left' src='../img/default.jpg'>  
                            <div class='mui-media-body'>  
                                <p id='news-title' style='background: #EEE;width:50%;'>&nbsp;</p>  
                                <p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'>&nbsp;</p>  
                            </div>  
                        </a>  
                    </li>  
                    <li id="nullData" class='mui-table-view-cell mui-media'>  
                        <a>  
                            <img class='mui-media-object mui-pull-left' src='../img/default.jpg'>  
                            <div class='mui-media-body'>  
                                <p id='news-title' style='background: #EEE;width:50%;'>&nbsp;</p>  
                                <p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'>&nbsp;</p>  
                            </div>  
                        </a>  
                    </li>  
                    <li id="nullData" class='mui-table-view-cell mui-media'>  
                        <a>  
                            <img class='mui-media-object mui-pull-left' src='../img/default.jpg'>  
                            <div class='mui-media-body'>  
                                <p id='news-title' style='background: #EEE;width:50%;'>&nbsp;</p>  
                                <p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'>&nbsp;</p>  
                            </div>  
                        </a>  
                    </li>  
                    <li id="nullData" class='mui-table-view-cell mui-media'>  
                        <a>  
                            <img class='mui-media-object mui-pull-left' src='../img/default.jpg'>  
                            <div class='mui-media-body'>  
                                <p id='news-title' style='background: #EEE;width:50%;'>&nbsp;</p>  
                                <p id='news-desc' class='mui-ellipsis-2' style='background: #EEE;idth:100%;'>&nbsp;</p>  
                            </div>  
                        </a>  
                    </li>  
                </ul>  
            </div>  
        </div>  

        <!--<div class="mui-loader srm-loader" id="loading">加载中...</div>-->  
        <!--返回顶部按钮-->  
        <a id="back_top" class="backTop">  
            <!--<span class="fa fa-chevron-up"></span>-->  
            <span class="mui-icon-extra mui-icon-extra-top"></span>  
        </a>  
    </div>  
    <script type="text/javascript" src="../js/mui.min.js"></script>  
    <script type="text/javascript" src="../js/jquery.min.js"></script>  
    <script type="text/javascript" src="../js/md5.min.js"></script>  
    <script type="text/javascript" src="../js/imgload.js"></script>  
    <script type="text/javascript" src="../js/common.js"></script>  
    <script type="text/javascript" charset="utf-8">  
        var newsPage = 1;  
        var nextUrl;  
        var newsUrl = 'http://apis.baidu.com/txapi/tiyu/tiyu';  
        var adverUrl = 'http://apis.baidu.com/txapi/mvtp/meinv';  
        var hasMore = true;  
        var isNetConnection = true;  
        //          var loading = document.getElementById("loading"); //正在加载  

        mui.init({  
            pullRefresh: {  
                container: "#pullrefresh", //下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等  
                down: {  
                    height: 80,  
                    contentdown: "下拉刷新", //可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容  
                    contentover: "释放刷新", //可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容  
                    contentrefresh: "正在刷新...", //可选,正在刷新状态时,下拉刷新控件上显示的标题内容  
                    callback: pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
                },  
                up: {  
                    contentrefresh: "正在加载...", //可选,正在加载状态时,上拉加载控件上显示的标题内容  
                    contentnomore: '已全部加载', //可选,请求完毕若没有更多数据时显示的提醒内容;  
                    callback: loadMore //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
                }  
            }  
        });  

        if(mui.os.plus) {  
            mui.plusReady(function() {  
                if(plus.networkinfo.getCurrentType() == 1) {  
                    isNetConnection = false;  
                }  
                document.addEventListener("netchange", onNetChange, false); //监听网络变化  
                setTimeout(function() {  
                    pulldownRefresh();  
                }, 1000);  
            });  
        } else {  
            mui.ready(function() {  
                pulldownRefresh();  
            });  
        }  

// var deceleration = mui.os.ios ? 0.003 : 0.0009;
// $('.mui-scroll-wrapper').scroll({
// bounce: false,
// indicators: true, //是否显示滚动条
// deceleration: deceleration
// });
//监听网络变化
function onNetChange() {
var nt = plus.networkinfo.getCurrentType();
switch(nt) {
case plus.networkinfo.CONNECTION_ETHERNET:
case plus.networkinfo.CONNECTION_WIFI:
case plus.networkinfo.CONNECTION_CELL2G:
case plus.networkinfo.CONNECTION_CELL3G:
case plus.networkinfo.CONNECTION_CELL4G:
isNetConnection = true;
//网络连接后自动刷新
pulldownRefresh();
alert("has networks!" + isNetConnection);
break;
default:
//网络未连接

                    isNetConnection = false;  
                    alert("Not networks!" + isNetConnection);  
                    break;  
            }  
        }  





var scrollToTopBox = document.getElementById('back_top');
scrollToTopBox.addEventListener('tap', function() {
mui('.mui-scroll-wrapper').pullRefresh().scrollTo(0, 0, 10); //100毫秒滚动到顶
});
/**

  • 滚动监听
    */
    //Android上监听原生滚动,iOS上监听div滚动,上拉超过屏幕1/4后显示按钮,否则隐藏,可自行在条件判断中修改
    if(mui.os.android) {
    window.addEventListener('scroll', function(e) {
    var trasparent_value = window.pageYOffset / (window.innerHeight / 4); //透明度
    //jqurey 动态改变标题栏背景透明度
    if(trasparent_value < 3) {
    $(".own-homepae-title-transparent-color").css('background', 'rgba(255, 255, 255,' + trasparent_value + ')');
    //改变标题栏下边阴影
    if(trasparent_value < 1) {
    $(".own-homepae-title-transparent-color").css('box-shadow', 'none');
    } else {
    $(".own-homepae-title-transparent-color").css('box-shadow', '0px 2px 2px #ccc');
    }
    //改变标题栏字体颜色
    if(trasparent_value < 0.5) {
    $(".own-homepae-title-text-color").css('color', '#ffffff');
    } else {
    $(".own-homepae-title-text-color").css('color', '#3E8CDE');
    }
    }

                //显示隐藏返回顶部图标  
                if(window.pageYOffset >= window.innerHeight / 4 && scrollToTopBox.classList.contains('hide')) {  
                    scrollToTopBox.classList.remove('hide');  
                } else if(window.pageYOffset < window.innerHeight / 4 && !scrollToTopBox.classList.contains('hide')) {  
                    scrollToTopBox.classList.add('hide');  
                }  
            });  
        } else {  
            document.getElementById('pullrefresh').addEventListener('scroll', function() {  
                if(mui('#pullrefresh').pullRefresh().y <= window.innerHeight * (-1 / 4) && scrollToTopBox.classList.contains('hide'))  
                    scrollToTopBox.classList.remove('hide');  
                else if(mui('#pullrefresh').pullRefresh().y > window.innerHeight * (-1 / 4) && !scrollToTopBox.classList.contains('hide'))  
                    scrollToTopBox.classList.add('hide');  
            });  
        }  
    </script>  

    </body>

2016-11-16 11:55 负责人:无 分享
已邀请:
欧阳1

欧阳1

那个应该是你body的滚动,不是mui-scroll的滚动条,对比下样子就知道啊

  • 1***@qq.com (作者)

    body的滚动?请问下该怎样设置!

    2016-11-16 17:27

  • 欧阳1

    设置body{overflow: hidden;}最好是设置全部(*)也许可能是你滑动区域的父级标签,不一定是body

    2016-11-17 10:10

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