lezi2012@qq.com
lezi2012@qq.com
  • 发布:2016-11-20 20:59
  • 更新:2019-11-27 19:44
  • 阅读:2921

mui-scroll android手机上(三星s6)不能滚动,看文档了,百度了,也到这里看到了类似的问题,都没有得到答案

分类:MUI

index.html

<!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">  

    <link rel="stylesheet" href="css/mui.min.css">  
</head>  

<body>  
<header class="mui-bar mui-bar-nav">  
    <h1 id="title" class="mui-title">下拉刷新和上拉加载更多</h1>  
</header>  
</body>  
<script src="js/mui.min.js"></script>  
<script type="text/javascript">  
    //启用双击监听  
    mui.init({  
        gestureConfig:{  
            doubletap:true  
        },  
        subpages:[{  
            url:'content_list.html',  
            id:'content_list.html',  
            styles:{  
                top: '45px',  
                bottom: '0px',  
            }  
        }]  
    });  

</script>  

</html>

content_list.html

<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="utf-8">  
    <title>Hello MUI</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" href="css/mui.min.css">  
</head>  

<body>  
<!--下拉刷新容器-->  
<div id="content_list_container" class="mui-content mui-scroll-wrapper">  
    <div class="mui-scroll">  
        <div class="mui-table-view" id="content_list">  
            <!--数据列表-->  
            <div class="mui-card">  
                <div class="mui-card-content">  
                    <div class="mui-card-content-inner">  
                        这是一个最简单的卡片视图控件;卡片视图常用来显示完整独立的一段信息,比如一篇文章的预览图、作者信息、点赞数量等  
                    </div>  
                </div>  
            </div>  

        </div>  
    </div>  
</div>  
</body>  
<script src="js/mui.min.js"></script>  
<script>  
    mui.init({  
        pullRefresh: {  
            container: '#content_list_container',  
            up: {  
                contentrefresh: '正在加载...',  
                callback: pullupRefresh  
            }  
        }  
    });  

    function pullupRefresh() {  
        var content_list = document.body.querySelector('#content_list');  
        for (var i = 0, len = 20; i < len; i++) {  
            var card = document.createElement('div');  
            card.className = 'mui-card';  
            card.innerHTML = " <div class='mui-card-content'>" +  
                    "<div class='mui-card-content-inner'>" +  
                    " cc这是一个最简单的卡片视图控件;卡片视图常用来显示完整独立的一段信息,比如一篇文章的预览图、作者信息、点赞数量等" +  
                    "</div>" +  
                    "</div>";  
            content_list.appendChild(card);  
        }  
        this.endPullupToRefresh(false);  
    }  

    mui.plusReady(function () {  
        mui('#content_list_container').scroll();  
    });  

</script>  
</html>
2016-11-20 20:59 负责人:无 分享
已邀请:
lezi2012@qq.com

lezi2012@qq.com (作者)

说实话一开始看mui 和 hbuilder的官方文档,觉得真不错的,直到遇到了这个不能滚动的问题,好几个小时,各种尝试,就是不能滚动,就感觉裆部被泰森不停的重击....

1060923048@qq.com

1060923048@qq.com

用mui-table-view

写代码的小喵喵

写代码的小喵喵

这个问题解决了吗?

东南角

东南角

怎么解决的呢

970228812@qq.com

970228812@qq.com

我也遇到了,怎么解决? 求大佬帮助啊

15818417990@126.com

15818417990@126.com

先试试官方例子可不可以,可以证明你的代码有错,自己耐心找不同,或者根据官方例子改造,不行有可能就是机子兼容问题,向官方的技术员提出

verycolorful@163.com

verycolorful@163.com

我也遇到同样的问题了,跟手机没关系
我试了几个手机都一样的问题。

我把上拉加载更多
up: {
auto:true,
contentrefresh: '正在加载...',
callback: pullupRefresh
}
注释掉,页面就可以滚动(当然数据改成静态的写在页面上)
只要加上这一句,不管是动态的还是静态的数据,都不能滚动了,搞不懂哪里出错了,
样式什么的都对的,也没有任何错误报出来。

  • 王者地带

    我暂没发现滚不动的情况,你可以发个有问题的页面出来,测试下

    2018-03-13 10:47

  • verycolorful@163.com

    昨天仔细对比了官方例子和我的代码,发现是silder跟scroll冲突,把scroll拉到silder外面就没问题了。

    2018-03-14 09:33

  • verycolorful@163.com

    所以最后没用MUI的silder,自己换个方式实现了下。

    2018-03-14 09:34

  • verycolorful@163.com

    回复 王者地带:mui-slider和mui-scroll-wrapper冲突导致,不能把mui-scroll-wrapper放在mui-slider里面

    2018-03-14 09:36

落叶孤尘

落叶孤尘 - 命途多舛的程序猿

请问这个问题 解决了么。我也是这个问题, 而且是部分手机出现这种问题,红米,三星S8等无法滑动,华为等手机 可以滑动

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