如何在可拖动选项卡内容区中嵌套图片轮播或者嵌套slider

@fxy

类似如下代码即可，选项卡3的子内容就是：

<div class="mui-slider">  
    <div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">  
        <a class="mui-control-item" href="#item1">选项卡1</a>  
        <a class="mui-control-item" href="#item2">选项卡2</a>  
        <a class="mui-control-item" href="#item3">选项卡3</a>  
    </div>  
    <div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>  
    <div class="mui-slider-group">  
                            <!--第一个选项卡子内容-->  
                            <div id="item1" class="mui-slider-item mui-control-content mui-active">  
                                <div class="mui-card">  
                                    <ul class="mui-table-view">  
                                        <li class="mui-table-view-cell">  
                                            <a class="mui-navigate-right">  
                                        Item 1  
                                    </a>  
                                        </li>  
                                    </ul>  
                                </div>  
                            </div>  
                            <!--第二个选项卡子内容-->  
                            <div id="item2" class="mui-slider-item mui-control-content">  
                                <div class="mui-card">  
                                    <ul class="mui-table-view">  
                                        <li class="mui-table-view-cell">  
                                            <a class="mui-navigate-right">  
                                            Item 4  
                                        </a>  
                                        </li>  
                                    </ul>  
                                </div>  
                            </div>  
                <!--第三个选项卡子内容-->  
                            <div id="item3" class="mui-slider-item mui-control-content">  
                                <div class="mui-slider">  
                                    <div class="mui-slider-group">  
                                        <div class="mui-slider-item">  
                                            <a href="#">  
                                                <img src="http://placehold.it/200x100">  
                                                <p class="mui-slider-title">文字说明1</p>  
                                            </a>  
                                        </div>  
                                        <div class="mui-slider-item">  
                                            <a href="#">  
                                                <img src="http://placehold.it/200x100">  
                                                <p class="mui-slider-title">文字说明2</p>  
                                            </a>  
                                        </div>  
                                    </div>  
                                    <div class="mui-slider-indicator">  
                                        <div class="mui-indicator mui-active"></div>  
                                        <div class="mui-indicator"></div>  
                                    </div>  
                                </div>  
                            </div>  
                        </div>  
                    </div>  

<script>
mui.init({
swipeBack: true
});
(function($) {
$('#scroll').scroll({
indicators: false //是否显示滚动条
});
这里var html2 = '<ul class="mui-table-view"><li class="mui-table-view-cell mui-media"><a href="#"><img class="mui-media-object mui-pull-left" src="img/pic2.png"><div class="mui-media-body"><h4>九里飘香</h4><></div></a></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.innerHTML = html2;
}, 1000);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.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 mui-segmented-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>

我有类似问题,代码里两个粗体"这里"后面的var html代码只能写在一行里面,不能添加太多html代码