Qusean
Qusean
  • 发布:2016-06-20 11:14
  • 更新:2016-06-20 11:49
  • 阅读:3169

滚动区域无法滚动下拉

分类:MUI

代码如下,是什么原因导致下拉和滚动无法纯在呢?


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

        <!--标准mui.css-->  
        <link rel="stylesheet" href="css/mui.min.css">  
        <!--App自定义的css-->  
        <link rel="stylesheet" type="text/css" href="css/app.css"/>  
        <link rel="stylesheet" href="css/style.css" />  
    </head>  

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

            <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="images/yuantiao.jpg">  
                            <p class="mui-slider-title">静静看这世界</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/shuijiao.jpg">  
                            <p class="mui-slider-title">幸福就是可以一起睡觉</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/muwu.jpg">  
                            <p class="mui-slider-title">想要一间这样的木屋,静静的喝咖啡</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/cbd.jpg">  
                            <p class="mui-slider-title">Color of SIP CBD</p>  
                        </a>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="images/yuantiao.jpg">  
                            <p class="mui-slider-title">静静看这世界</p>  
                        </a>  
                    </div>  
                    <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#">  
                            <img src="images/shuijiao.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 class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                    <div class="mui-indicator"></div>  
                </div>  
            </div>  

            <div id="mainpage" class="mui-scroll">  
            <ul id="list" class="mui-table-view mui-table-view-chevron">  

            </ul>  
            </div>  
        </div>  
    </body>  
    <script src="js/mui.min.js"></script>  
    <script src="js/mui.lazyload.js"></script>  
    <script src="js/mui.lazyload.img.js"></script>  
    <script>  
    mui.init({  
    swipeBack: true, //启用右滑关闭功能  
    pullRefresh: {  
        container: "#mainpage", //待刷新区域标识,querySelector能定位的css选择器均可,比如:id、.class等  
         down : {  
      height:50,//可选,默认50.触发下拉刷新拖动距离,  

      contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容  
      contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容  
      contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容  
      callback :pullfreshPage //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;  
    }  
    }  
});  
 function pullfreshPage(){  
    var currentView =plus.webview.currentWebview();  
    currentView.hide();  
    currentView.reload();  
    currentView.show("page-forward",1000);  
    mui.toast("刷新完成!");  
    mui('#mainpage').pullRefresh().endPulldownToRefresh();  

 }  
        var slider = mui("#slider");  
        var createFragment = function(count) {  
            var fragment = document.createDocumentFragment();  
            var li;  
            for (var i = 0; i < count; i++) {  
                li = document.createElement('li');  
                li.className = 'mui-table-view-cell mui-media';  
                li.innerHTML = '<a class="mui-navigate-right"><img class="mui-media-object mui-pull-left" data-lazyload="http://www.dcloud.io/hellomui/images/' + (i % 5 + 1) + '.jpg?version=' + Math.random() * 1000 + '"><div class="mui-media-body">主标题<p class="mui-ellipsis">列表二级标题</p></div></a>';  
                fragment.appendChild(li);  
            }  
            return fragment;  
        };  
        (function($) {  
            var list = document.getElementById("list");  
            list.appendChild(createFragment(50));  
            $(document).imageLazyload({  
                placeholder: 'images/60x60.gif'  
            });  
        })(mui);  

    </script>  
</html>  
2016-06-20 11:14 负责人:无 分享
已邀请:
BoredApe

BoredApe - 有问题就会有答案。

下拉刷新需要使用统一的DOM结构如下

<!--下拉刷新容器-->  
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">  
  <div class="mui-scroll">  
    <!--数据列表-->  
    <ul class="mui-table-view mui-table-view-chevron">  

    </ul>  
  </div>  
</div>

动态添加的内容需要重新初始化

mui('.mui-scroll-wrapper').scroll({});
  • Qusean (作者)

    原来是因为动态内容需要重新计算滚动区域的问题,解决好了,感谢果汁!!

    2016-06-20 18:32

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