sunlawa
sunlawa
  • 发布:2015-03-19 12:28
  • 更新:2015-04-04 21:57
  • 阅读:2046

发现一个问题,当下拉功能与图片轮播一起时,图片轮播功能不正常

分类:MUI

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<title>首页</title>
<link rel="stylesheet" href="../css/mui.min.css">
<link rel="stylesheet" href="../css/common.css"/>
<!--<script src="../js/jquery-1.3.2.min.js"></script>-->
<script src="../js/mui.min.js"></script>
<script src="../js/app.js"></script>
</head>
<body>
<div class="mui-content" id="refcontent">
<div id="sliders">
<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="Individual-Center.html">
<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>  
    <div class="title">最新活动</div>  
    <ul id="Match" class="mui-table-view mui-grid-view"></ul>  
    <div class="title">最新资讯</div>  
    <ul id="News" class="mui-table-view"></ul>  
</div>  
<script type="text/javascript" charset="utf-8">  
    var slider = mui("#slider");  
    slider.slider({  
        interval: 5000  
    });  
    mui.init({  
        swipeBack: false,  
        pullRefresh: {  
            container: '#refcontent',  
            down: {  
                callback: pullRef  
            }  
        }  
    });  
    /**  
     * 加载具体业务实现  
     */  
    function pullRef() {  
        //ajax();  
        setTimeout(mui('#refcontent').pullRefresh().endPulldownToRefresh(),1500);  
    }  
    //上拉函数  
    function pullupRefresh()  
    {  
        mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。  
    }  
</script>  
</body>  
</body>  

</html>

2015-03-19 12:28 负责人:无 分享
已邀请:
爱已成歌

爱已成歌

我也遇到这个问题了。
下拉刷新控件和图片轮播控件不能一起用,不然图片就显示不出来。
从左往右划的时候,有一张可以显示一下,不过立即就消失了。
望官方能尽快解决这个问题,这个需求太平常和太频繁了

爱已成歌

爱已成歌

我发现去掉 mui-slider-loop 这个class 以后,图片就显示正常了。
可能是官方通过mui-slider-loop这个class去操作图片轮播的时候出问题了。官方要赶紧解决下啊。。。
楼主现在可以暂时去掉这个自动轮播的属性,代之以代码方式来轮播应该就可以了。
如:
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll mui-slider">
<!--数据列表-->
<div class="mui-slider-group">
<div class="mui-slider-item mui-slider-item-duplicate">
...

  • 爱已成歌

    抱歉,修正下,这样做只能保证首屏正确,其他的图片还是不能轮播。官方要给力啊。。。

    2015-04-04 20:35

爱已成歌

爱已成歌

抱歉,修正下,这样做只能保证首屏正确,其他的图片还是不能轮播。官方要给力啊。。。

爱已成歌

爱已成歌

官方已经给出了临时解决办法。
http://ask.dcloud.net.cn/question/4098

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