我真的服了，slider模块也是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">
<style type="text/css">
</style>
</head>
<body>
<header class="mui-bar mui-bar-nav">
</header>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item mui-control-content" v-for="d in ExamData">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
{{d. SHIPNAME}}
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="../js/mui.min.js"></script>
<script src="../js/vue.2.6.10.js"></script>
<script type="text/javascript">
mui.init({
swipeBack: false
});
mui.plusReady(function() {
new Vue({
el: '#slider',
data: {
ExamData: null
},
methods: {
Get_ExamData: function() {
var _this = this;
mui.ajax(
'http://XXXXX', {
data: {
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 5000, //超时时间设置为5秒；
success: function(res) {
_this.ExamData = JSON.parse(res);
mui('#slider').slider();//并不好用 一样还是不能拖动
console.log('成功');
},
error: function(xhr, type, errorThrown) {
console.log('失败');
}
});
mui('#slider').slider();//并不好用 一样还是不能拖动
}
},
mounted: function() {
mui('#slider').slider();//并不好用 一样还是不能拖动
this.Get_ExamData();
}
});
});
</script> </html>
2 个回复
1***@qq.com - wenaoxiang
遇到了同样的问题！好失望
帽子平头
这个看下源码就知道了，mui的一开始初始化时就已经初始化slider，那时候vue还没有数据，当vue动态填充数据后，你再去初始化，此时slider方法里有var id = sliderElement.getAttribute('data-slider')这段代码已经有值了，导致它不会重新初始化，从而还是最早初始化状态，因此只要移除这个sliderElement.removeAttribute(''data-slider')，再去初始化就可以了，代码如下：
$('.mui-slider').removeAttr("data-slider");
mui('.mui-slider').slider({
interval: 3000
});