jzhang
jzhang
  • 发布:2015-02-27 15:39
  • 更新:2016-05-16 22:32
  • 阅读:1952

可拖动选项卡嵌套图片轮播时图片错位的问题

分类: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">  

        <link rel="stylesheet" href="../css/mui.min.css">  
        <script src="../js/mui.min.js"></script>  
        <script src="../js/app.js"></script>  
        <style>  
            html,  
            body {  
                background-color: #efeff4;  
            }  
            header.mui-bar {  
                display: none;  
            }  
            .mui-bar-nav~.mui-content {  
                padding: 0;  
            }  
        </style>  

        <style>  
            .mui-control-content {  
                background-color: white;  
                min-height: 215px;  
            }  
            .mui-control-content .mui-loading {  
                margin-top: 50px;  
            }  
        </style>  
    </head>  

    <body>  

        <div class="mui-content">  
            <div id="slider" class="mui-slider mui-fullscreen">  
                <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
                    <a class="mui-control-item" href="#item1mobile">选项卡1</a>  
                    <a class="mui-control-item" href="#item2mobile">选项卡2</a>  
                </div>  
                <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>  
                <div class="mui-slider-group">  
                    <div id="item1mobile" class="mui-slider-item mui-control-content mui-active">  

                        <div id="sliderteacher" 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">  
                                        <p class="mui-slider-title">Color of SIP CBD</p>  
                                    </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 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 id="item2mobile" class="mui-slider-item mui-control-content">  
                        <div id="scroll2" class="mui-scroll-wrapper">  
                            <div class="mui-scroll">  
                                <div class="mui-loading">  
                                    <div class="mui-spinner">  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  

                    </div>  

                </div>  
            </div>  

        </div>  
        <script>  
            mui.init({  
                swipeBack: false  
            });  
            var sliderteacher = mui("#sliderteacher");  
            sliderteacher.slider({  
                interval: 3000  
            });  
            (function($) {  
                $('.mui-scroll-wrapper').scroll({  
                    indicators: true //是否显示滚动条  
                });  
                var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第二个选项卡子项-1</li><li class="mui-table-view-cell">第二个选项卡子项-2</li><li class="mui-table-view-cell">第二个选项卡子项-3</li><li class="mui-table-view-cell">第二个选项卡子项-4</li><li class="mui-table-view-cell">第二个选项卡子项-5</li></ul>';  
                //var html3 = '<ul class="mui-table-view"><li class="mui-table-view-cell">第三个选项卡子项-1</li><li class="mui-table-view-cell">第三个选项卡子项-2</li><li class="mui-table-view-cell">第三个选项卡子项-3</li><li class="mui-table-view-cell">第三个选项卡子项-4</li><li class="mui-table-view-cell">第三个选项卡子项-5</li></ul>';  
                var item2 = document.getElementById('item2mobile');  
                //var item3 = document.getElementById('item3mobile');  
                document.getElementById('slider').addEventListener('slide', function(e) {  
                    if (e.detail.slideNumber === 1) {  
                        if (item2.querySelector('.mui-loading')) {  
                            setTimeout(function() {  
                                item2.querySelector('.mui-scroll').innerHTML = html2;  
                            }, 200);  
                        }  
                    }  
                    //                  else if (e.detail.slideNumber === 2) {  
                    //                      if (item3.querySelector('.mui-loading')) {  
                    //                          setTimeout(function() {  
                    //                              item3.querySelector('.mui-scroll').innerHTML = html3;  
                    //                          }, 1000);  
                    //                      }  
                    //                  }  
                });  
                var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');  
                $('.mui-input-group').on('change', 'input', function() {  
                    if (this.checked) {  
                        sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted ' + this.value;  
                        //force repaint  
                        sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));  
                    }  
                });  
            })(mui);  
        </script>  

    </body>  

</html>
2015-02-27 15:39 负责人:无 分享
已邀请:
2027

2027

把高定死应该可以解决问题

Xy丶

Xy丶

.mui-fullscreen.mui-slider .mui-slider-item > a {  
    top: initial;  
    -webkit-transform: initial;  
    transform: initial;  
}

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