MUI+vue.js在采用ajax方式读入数据后，无法激活slide插件的滑动行为
<!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">
.mui-control-content {
background-color: transparent;
min-height: 515px;
}
.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
border-bottom: 0px solid #c8c7cc;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
/* 导航页样式 */
.mui-bar-nav {
-webkit-box-shadow: 0 0px 0px #FFFFFF;
background: #FFFFFF;
}
/* 导航页H1样式 */
.mui-bar .mui-title {
color: #000000;
}
/* 取消列表上边框 */
.mui-table-view:before {
background-color: #FFFFFF;
}
/* 取消列表下边框 */
.mui-table-view:after {
background-color: #FFFFFF;
}
.mui-scroll-wrapper {
padding: 10px;
}
.mui-checkbox input[type=checkbox]:checked:before,
.mui-radio input[type=radio]:checked:before {
color: #2a8cff;
}
</style>
<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() {
var time = document.getElementById('time').innerHTML
var newTime = ""
var h = parseInt(time.split(':')[0])
var m = parseInt(time.split(':')[1])
var s = parseInt(time.split(':')[2])
var timers = setInterval(function() {
if (s == 0) {
s = 60;
m--;
s--;
if (m == 0) {
if (h == 0) {
} else {
m = 59;
h--;
s--;
}
}
} else {
s--;
}
if (s == 0 && m == 0 && h == 0) {
clearInterval(timers)
}
newTime = addZero(h) + ":" + addZero(m) + ":" + addZero(s)
document.getElementById('time2').innerHTML = newTime;
}, 1000)
function addZero(num) {
var num_ = num + '';
if (num_.length != 2) {
return '0' + num
} else {
return num
}
}
new Vue({
el: '#slider',
data: {
ExamData: null
},
methods: {
Get_ExamData: function() {
var _this = this;
mui.ajax(
'http://xxxxxx', {
data: {
},
dataType: 'json', //服务器返回json格式数据
type: 'post', //HTTP请求类型
timeout: 5000, //超时时间设置为5秒；
success: function(res) {
_this.ExamData = JSON.parse(res);
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
console.log('成功');
},
error: function(xhr, type, errorThrown) {
console.log('失败');
}
});
}
},
mounted: function() {
// mui.init();
// mui("#slider").slider({
// interval: 5000
// });
this.Get_ExamData();
}
});
});
</script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 id="time" class="mui-title" style="display: none;">00:59:59</h1>
<h1 id="time2" class="mui-title"></h1>
</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>
<nav class="mui-bar mui-bar-tab" style="box-shadow: 0 0 0px #FFFFFF;">
<a class="mui-tab-item mui-active">
<span class="mui-icon">
<img src="../img/icon/jiaojuan.png" width="100%">
</span>
<span class="mui-tab-label" style="font-size: 14px; font-weight: 600;">交卷</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon">
<img src="../img/icon/biaoji.png" width="100%">
</span>
<span class="mui-tab-label" style="font-size: 14px; font-weight: 600;">标记</span>
</a>
<a class="mui-tab-item">
<span class="mui-icon">
<img src="../img/icon/maodian.png" width="100%">
</span>
<span class="mui-tab-label" style="font-size: 14px; font-weight: 600;">28/100</span>
</a>
</nav>
</body></html>
代码就是这样 我看官网上说是因为VUE加载数据以后DOM没有更新 试过了相应的办法以后但是不知道应该如何解决
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论