1、直接添加的方式可以滑动，
2、在js中动态添加则不可滑动
3、图中一行图片可左右滑动，后面动态添加的均不可滑动
代码如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="//ask.dcloud.net.cn/../css/mui.min.css" rel="stylesheet" />
</head>
<body>
<script src="../js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
</script>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">标题</h1>
</header>
<div class="mui-content">
<ul id="mui-table-view" class="mui-table-view">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="../images/check.png">
<div class="mui-media-body">
test1
<p class="mui-ellipsis">11111111111111111111</p>
</div>
</a>
</li>
<li class="mui-table-view-cell">
<a>
<img class="mui-media-object mui-pull-left" src="../images/check.png">
<div class="mui-media-body">
test2
<p class="mui-ellipsis">2222222222222</p>
</div>
</a>
</li>
<li class="mui-table-view-cell ">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="h../images/check.png">
<div class="mui-media-body">
test3
<p class="mui-ellipsis">33333333333333333333</p>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media" style="height: 150px;">
<div id="slider" class="mui-slider mui-fullscreen" style="height: 100px;">
<div style="height: 100px;" id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll">
<img src="../images/check.png" style="width: 70px;height: 70px;" />
<img src="../images/check.png" style="width: 70px;height: 70px;" />
<img src="../images/check.png" style="width: 70px;height: 70px;" />
<img src="../images/check.png" style="width: 70px;height: 70px;" />
<img src="../images/check.png" style="width: 70px;height: 70px;" />
<img src="../images/check.png" style="width: 70px;height: 70px;" />
<img src="../images/check.png" style="width: 70px;height: 70px;" /> <img src="../images/check.png" style="width: 70px;height: 70px;" />
<img src="../images/check.png" style="width: 70px;height: 70px;" />
</div>
</div>
</div>
</li>
<li class="mui-table-view-cell ">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="h../images/check.png">
<div class="mui-media-body">
test4
<p class="mui-ellipsis">444444444444444</p>
</div>
</a>
</li>
<li class="mui-table-view-cell ">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="h../images/check.png">
<div class="mui-media-body">
test5
<p class="mui-ellipsis">5555555555555555</p>
</div>
</a>
</li>
</ul>
</div>
</body>
<script type="text/javascript">
mui.ready(function() {
var table = document.body.querySelector('#mui-table-view');
console.log("plusReady");
for (var i = 0; i < 15; i ) {
var li = document.createElement('li');
li.id = 'checkStander';
li.className = 'mui-table-view-cell mui-media';
li.setAttribute('style','height: 150px')
var divSlider=document.createElement('div');
divSlider.className='mui-slider mui-fullscreen';
divSlider.setAttribute('style','height: 150px');
var divSliderSegmentedControl=document.createElement('div');
divSliderSegmentedControl.setAttribute('class','mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted');
divSliderSegmentedControl.setAttribute('style','height: 150px');
divSlider.appendChild(divSliderSegmentedControl);
var divScroll=document.createElement('div');
divScroll.setAttribute('class','mui-scroll');
divScroll.setAttribute('style','height: 150px');
divSliderSegmentedControl.appendChild(divScroll);
for(var j=0;j<15;j ){
var img=document.createElement('img');
img.setAttribute('style','height: 70px;width: 70px;')
img.src='../images/check.png'
divScroll.appendChild(img);
}
li.appendChild(divSlider);
table.appendChild(li);
}
})
</script> </html>
