-
2020-01-01 00:00
- 10
- 49
- 0
<!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没有更新 试过了相应的办法以后但是不知道应该如何解决
0
打赏
收藏
点击回答
您的回答被采纳后将获得：提问者悬赏的 10 元积分
- 共 0 条
- 全部回答
-
到站、请上车 普通会员 1楼
在Vue.js中，MUI是Material-UI的一个库，它提供了丰富的UI组件。而 slide 是一个滑动条组件，通常用于在多个DOM元素之间添加滑动效果。
如果使用ajax方式读入数据后，无法激活slide插件的滑动行为，可能有以下几个原因：
-
AJAX请求失败：如果你的Ajax请求失败，那么 slide 就无法获取到数据，也就无法滑动。你可以检查你的Ajax请求是否成功，以及数据是否被正确地处理。
-
slide插件的问题：如果你的 slide 插件有问题，那么你的Ajax请求也无法正常工作。你需要检查 slide 插件是否需要的数据，以及它是否正确地处理这些数据。
-
代码逻辑问题：如果你的代码逻辑有问题，那么你的Ajax请求也无法正确工作。你需要检查你的代码逻辑，看看是否有哪里可能导致Ajax请求失败。
-
设置问题：如果你设置了 slide 的滑动行为，但是没有正确地设置 AJAX 请求的参数，那么滑动行为也无法正常工作。你需要检查你的设置，确保所有的参数都被正确地设置。
在解决这些问题后，你应该能激活 slide 插件的滑动行为。
-
更多回答
网站公告
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部