爱慕啼
爱慕啼
  • 发布:2015-09-19 15:39
  • 更新:2015-11-03 23:10
  • 阅读:3426

mui 图片轮播开启自动跳转时下边的内容列表会跟着节奏一闪一闪的?

分类:MUI

轮播图开启跳转,推荐商品下的ul是一个ajax生成的数据列表,但是已开启图片轮播,下边的标签都会一闪一闪的开始跳动?不知如何解决?

mui('.mui-slider').slider({  
                interval: 2000  
});

页面代码

    <!--内容区域-->  
        <div class="mui-content">  
            <!--轮播图-->  
            <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="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">  
                        </a>  
                        <p class="mui-slider-title">  
                            静静看这世界  
                        </p>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">  
                        </a>  
                        <p class="mui-slider-title">  
                            幸福就是可以一起睡觉  
                        </p>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="http://dcloudio.github.io/mui/assets/img/muwu.jpg">  
                        </a>  
                        <p class="mui-slider-title">  
                            想要一间这样的木屋,静静的喝咖啡  
                        </p>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="http://dcloudio.github.io/mui/assets/img/cbd.jpg">  
                        </a>  
                        <p class="mui-slider-title">  
                            Color of SIP CBD  
                        </p>  
                    </div>  
                    <div class="mui-slider-item">  
                        <a href="#">  
                            <img src="http://dcloudio.github.io/mui/assets/img/yuantiao.jpg">  
                        </a>  
                        <p class="mui-slider-title">  
                            静静看这世界  
                        </p>  
                    </div>  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <a href="#">  
                            <img src="http://dcloudio.github.io/mui/assets/img/shuijiao.jpg">  
                        </a>  
                        <p class="mui-slider-title">  
                            幸福就是可以一起睡觉  
                        </p>  
                    </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 class="list-title clearfix">  
                <span class="line fl"></span>  
                <span class="list-title-span">推荐商品</span>  
                <span class="line fr"></span>  
            </div>  
            <ul class="mui-table-view mian-list" id="index_main_list">  

            </ul>
2015-09-19 15:39 负责人:无 分享
已邀请:
zhaojiamin

zhaojiamin

换一个轮播插件吧。

DCloud_UNI_FXY

DCloud_UNI_FXY

试试这个行不行
.mui-slider{
z-index:1;
}

  • 爱慕啼 (作者)

    您好,如果我把z-index设成1的话下边的列表就不能显示了?如果我设成-1的话列表可以显示,但是轮播图就无法点击,不知还有什么方法?

    2015-09-19 17:56

  • DCloud_UNI_FXY

    回复 爱慕啼:发测试工程

    2015-09-19 18:06

  • 爱慕啼 (作者)

    您好,项目已发。

    因为数据都是在都是在接口都是调的本地服务器上的,可能无法看见效果。

    还是有就是刚刚提的上拉加载您也帮忙看一下?

    2015-09-19 18:17

  • DCloud_UNI_FXY

    回复 爱慕啼:那就发一个可重现问题的静态demo

    2015-09-20 01:20

  • 爱慕啼 (作者)

    回复 DCloud_UNI_FXY:您好,我又更新了,大概可以看出效果

    2015-09-20 09:50

  • DCloud_UNI_FXY

    回复 爱慕啼:我加上.mui-slider{z-index:1;}测试,列表不影响。

    2015-09-20 13:56

  • 爱慕啼 (作者)

    您是在手机上测的效果吗?在手机上运行列表就消失了

    2015-09-20 16:43

  • 爱慕啼 (作者)

    谢谢,还是z-index的问题

    2015-09-20 20:45

夏小杰

夏小杰

完全不懂 怎么自动开始轮播 要怎么设置

            var slider = mui("#slider");  
            document.getElementById("switch").addEventListener('toggle', function(e) {  
                if (e.detail.isActive) {  
                    slider.slider({  
                        interval: 5000  
                    });  
                } else {  
                    slider.slider({  
                        interval: 0  
                    });  
                }  
            });

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