惰性气体
惰性气体
  • 发布:2015-03-30 18:25
  • 更新:2015-09-10 20:24
  • 阅读:2083

图片轮播在下拉刷新中图片不能显示

分类:MUI

如题,当把轮播图片放入到下拉刷新中,轮播的图片就不会显示了。求解!

下面是源码

<!DOCTYPE html>  
<html>  

    <head>  
        <meta charset="utf-8">  
        <title>Title</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-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 href="../css/mui.min.css" rel="stylesheet" />  

        <style>  
            html,body {  
                background-color: #efeff4;  
            }  
            .mui-bar-nav~.mui-content{  
                padding: 0;  
            }  
        </style>  
    </head>  

    <body>  

        <!--下拉刷新容器-->  
        <div id="pullrefresh" class="mui-content mui-scroll-wrapper">  

            <div class="mui-scroll">  
                <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">  
                            </a>  
                        </div>  
                        <!-- 第一张 -->  
                        <div class="mui-slider-item">  
                            <a href="#">  
                                <img src="../images/shuijiao.jpg">  
                            </a>  
                        </div>  
                        <!-- 第二张 -->  
                        <div class="mui-slider-item">  
                            <a href="#">  
                                <img src="../images/muwu.jpg">  
                            </a>  
                        </div>  
                        <!-- 第三张 -->  
                        <div class="mui-slider-item">  
                            <a href="#">  
                                <img src="../images/cbd.jpg">  
                            </a>  
                        </div>  
                        <!-- 第四张 -->  
                        <div class="mui-slider-item">  
                            <a href="#">  
                                <img src="../images/yuantiao.jpg">  
                            </a>  
                        </div>  
                        <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->  
                        <div class="mui-slider-item mui-slider-item-duplicate">  
                            <a href="#">  
                                <img src="../images/shuijiao.jpg">  
                            </a>  
                        </div>  
                    </div>  
                    <div class="mui-slider-indicator">  
                        <div class="mui-indicator mui-active"></div>  
                        <div class="mui-indicator"></div>  
                        <div class="mui-indicator"></div>  
                        <div class="mui-indicator"></div>  
                    </div>  
                </div>  
                <!--数据列表-->  
                <ul class="mui-table-view mui-table-view-chevron">  

                </ul>  
            </div>  

        </div>  

        <script src="../js/mui.min.js"></script>  
        <script type="text/javascript" charset="utf-8">  
            mui.init({  
                swipeBack: false,  
                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);  
            }  

            //图片轮播  
            var slider = mui("#slider");  
            slider.slider({  
                interval: 3000  
            });  

            if (mui.os.plus) {  
                mui.plusReady(function() {  
                    setTimeout(function() {  
                        mui('#pullrefresh').pullRefresh().pullupLoading();  
                    }, 1000);  

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

</html>
2015-03-30 18:25 负责人:无 分享
已邀请:
GS

GS

我也有同样的问题,请问有解决方法了吗?

DCloud_UNI_FXY

DCloud_UNI_FXY

确认为BUG,下个版本修复此问题。目前你可以手动增加样式来解决:

.mui-plus-pullrefresh .mui-slider-group {  
  overflow: visible;  
}
  • GS

    谢谢你

    2015-04-02 18:01

  • leah_huang

    table-view 中的mui-slider-right也有同样的问题,加上这个没有作用,这有解决办法么

    2016-01-21 13:45

惰性气体

惰性气体 (作者)

方案可行,期待版本更新

爱已成歌

爱已成歌

赞一个!官方给力!

holy1004

holy1004

代码可行,但是官方并没有给出相关demo

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