3***@qq.com
3***@qq.com
  • 发布:2017-08-24 09:40
  • 更新:2019-04-25 12:17
  • 阅读:2141

使用mui的轮播控件时,一行展示两个div时。滑到最后一页,会出现短暂白屏

分类:MUI
2017-08-24 09:40 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com (作者)

  <div id="slider" class="mui-slider" >  

                <div class="mui-slider-group mui-slider-loop mui-row">  
                    <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <div class="mui-table-view-cell mui-media">       
                                <a href="javascript:;">  
                                    <img class="mui-media-object mui-pull-left" src="../img/img03.png">  
                                    <div class="mui-media-body">  
                                        <h4 class="color_333">备孕圈</h4>  
                                        <span>3256人在讨论</span>  
                                    </div>  

                                </a>  
                                <p class="mui-ellipsis" style="width: 100%;">能和心爱的人一起睡觉</p>  
                        </div>  
                    </div>  

                    <!-- 第一张 -->  
                    <div class="mui-slider-item">  
                        <div class="mui-table-view-cell mui-media">       
                                <a href="javascript:;">  
                                    <img class="mui-media-object mui-pull-left" src="../img/img01.png">  
                                    <div class="mui-media-body">  
                                        <h4 class="color_333">奇葩说</h4>  
                                        <span>3256人在讨论</span>  
                                        <!--<p class="mui-ellipsis"><span>3256</span>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>-->  
                                    </div>  

                                </a>  
                                <p class="mui-ellipsis" style="width: 100%;">能和心爱的人一起睡觉</p>  
                        </div>  
                    </div>  
                    <!-- 第二张 -->  
                    <div class="mui-slider-item">  
                        <div class="mui-table-view-cell mui-media">       
                                <a href="javascript:;">  
                                    <img class="mui-media-object mui-pull-left" src="../img/a4.jpg">  
                                    <div class="mui-media-body">  
                                        <h4 class="color_333">爱乐孕官方</h4>  
                                        <span>3256人在讨论</span>  
                                        <!--<p class="mui-ellipsis"><span>3256</span>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>-->  
                                    </div>  

                                </a>  
                                <p class="mui-ellipsis" style="width: 100%;">能和心爱的人一起睡觉</p>  
                        </div>  
                    </div>  
                    <!-- 第三张 -->  
                    <div class="mui-slider-item">  
                        <div class="mui-table-view-cell mui-media">       
                                <a href="javascript:;">  
                                    <img class="mui-media-object mui-pull-left" src="../img/img03.png">  
                                    <div class="mui-media-body">  
                                        <h4 class="color_333">爱乐孕官方</h4>  
                                        <span>3256人在讨论</span>  
                                        <!--<p class="mui-ellipsis"><span>3256</span>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>-->  
                                    </div>  

                                </a>  
                                <p class="mui-ellipsis" style="width: 100%;">能和心爱的人一起睡觉</p>  
                        </div>  
                    </div>  

                    <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->  
                    <div class="mui-slider-item mui-slider-item-duplicate">  
                        <div class="mui-table-view-cell mui-media">       
                                <a href="javascript:;">  
                                    <img class="mui-media-object mui-pull-left" src="../img/img01.png">  
                                    <div class="mui-media-body">  
                                        <h4 class="color_333">爱乐孕官方</h4>  
                                        <span>3256人在讨论</span>  
                                        <!--<p class="mui-ellipsis"><span>3256</span>能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>-->  
                                    </div>  

                                </a>  
                                <p class="mui-ellipsis" style="width: 100%;">能和心爱的人一起睡觉</p>  
                        </div>  
                    </div>  
                </div>  
            </div>

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