试着写一个新闻类的APP，但是遇到了问题。
简单来说，我需要用ajax从后台取到幻灯片数据，然后动态生成DOM。按照DCLOUD官方说法，需要在DOM加载完毕后，再手动slider一次。但我写的HTML里，自动轮播仅执行了一次，然后就不执行了，我试着在slider调用之前console.log了DOM，发现DOM已经加载完毕了，请大神解答是怎么回事。
贴出完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<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">
<title>天下黄果树</title>
<script src="js/mui.min.js"></script>
<script src="js/xhs_app.js" type="text/javascript" charset="utf-8"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/savior.css" />
<script type="text/javascript" charset="utf-8">
mui.init();
</script>
</head>
<body class="xhs xhs-hybrid">
<!-- 主界面移动、菜单不动 -->
<div class="mui-off-canvas-wrap mui-draggable">
<!-- 菜单容器 -->
<aside class="mui-off-canvas-left" id="offCanvasSide">
<div class="box menu_login">
<div class="mask" id="btn_ToLogin">
</div>
<div class="box_body" id="userInfo">
<img src="images/userimage.png" />
<div class="title" id="userName">点击登录</div>
<div class="subtitle" id="userAccount">
登录享受更多精彩服务
</div>
</div>
</div>
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<!-- 菜单具体展示内容 -->
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="icon icon_draw_fav"></span>
<span class="title">我的收藏</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="icon icon_draw_cleanCache"></span>
<span class="title">清理缓存</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="icon icon_draw_appRecommend"></span>
<span class="title">应用推荐</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="icon icon_draw_readSetting"></span>
<span class="title">阅读设置</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="icon icon_draw_sysSetting"></span>
<span class="title">系统设置</span>
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
<span class="icon icon_draw_qrcodeScan"></span>
<span class="title">二维码扫描</span>
</a>
</li>
</ul>
</div>
</div>
</aside>
<!-- 主页面容器 -->
<div class="mui-inner-wrap">
<!-- 主页面标题 -->
<header class="mui-bar mui-bar-nav">
<a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
<h1 class="mui-title">
<img src="images/actionbar_logo.png"/>
</h1>
<a class="weather_board">
<span class="icon icon_weather_cloudy" id="weather_img"></span>
<span class="title">黄果树</span>
<span class="subtitle">5°C~12°C</span>
</a>
</header>
<div class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-switch" id="switch">
<div class="mui-switch-handle"></div>
</div>
<!-- 主界面具体展示内容 -->
<div id="slider" class="mui-slider picSlider">
<div class="mui-slider-group mui-slider-loop">
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="http://t.cn/RIXT28O?"><img src="http://114.215.122.180/xhcityhgs/upload/201612/20/201612201547432400_Thumb.jpg">
<p class="mui-slider-title">奋力打造升级版 旅游龙头黄果树</p>
</a>
<div class="mui-slider-indicator sliderBadget">
<a href="http://t.cn/RIXT28O?"><span class="subtitle">05</span><span class="title">05</span></a>
</div>
</div>
<div class="mui-slider-item">
<a href="http://t.cn/RI1g85o?"><img src="http://114.215.122.180/xhcityhgs/upload/201612/30/201612301107428957_Thumb.jpg">
<p class="mui-slider-title">美丽中国乡村行——丰收黄果树</p>
</a>
<div class="mui-slider-indicator sliderBadget">
<a href="http://t.cn/RI1g85o?"><span class="subtitle">01</span><span class="title">05</span></a>
</div>
</div>
<div class="mui-slider-item">
<a href="http://t.cn/RIQoPLG?"><img src="http://114.215.122.180/xhcityhgs/upload/201612/27/201612271047569030_Thumb.jpg">
<p class="mui-slider-title">黄果树旅游区迅速贯彻落实市第四次党代会精神</p>
</a>
<div class="mui-slider-indicator sliderBadget">
<a href="http://t.cn/RIQoPLG?"><span class="subtitle">02</span><span class="title">05</span></a>
</div>
</div>
<div class="mui-slider-item">
<a href="http://t.cn/RITblJJ?"><img src="http://114.215.122.180/xhcityhgs/upload/201612/26/201612261427036508_Thumb.jpg">
<p class="mui-slider-title">外省游客持高铁票游安顺黄果树等景点 门票打五折</p>
</a>
<div class="mui-slider-indicator sliderBadget">
<a href="http://t.cn/RITblJJ?"><span class="subtitle">03</span><span class="title">05</span></a>
</div>
</div>
<div class="mui-slider-item">
<a href="http://t.cn/RISl1IR?"><img src="http://114.215.122.180/xhcityhgs/upload/201612/21/201612211111293297_Thumb.jpg">
<p class="mui-slider-title">图解安顺市第四次党代会报告</p>
</a>
<div class="mui-slider-indicator sliderBadget">
<a href="http://t.cn/RISl1IR?"><span class="subtitle">04</span><span class="title">05</span></a>
</div>
</div>
<div class="mui-slider-item mui-active">
<a href="http://t.cn/RIXT28O?"><img src="http://114.215.122.180/xhcityhgs/upload/201612/20/201612201547432400_Thumb.jpg">
<p class="mui-slider-title">奋力打造升级版 旅游龙头黄果树</p>
</a>
<div class="mui-slider-indicator sliderBadget">
<a href="http://t.cn/RIXT28O?"><span class="subtitle">05</span><span class="title">05</span></a>
</div>
</div>
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="http://t.cn/RI1g85o?"><img src="http://114.215.122.180/xhcityhgs/upload/201612/30/201612301107428957_Thumb.jpg">
<p class="mui-slider-title">美丽中国乡村行——丰收黄果树</p>
</a>
<div class="mui-slider-indicator sliderBadget">
<a href="http://t.cn/RI1g85o?"><span class="subtitle">01</span><span class="title">05</span></a>
</div>
</div>
</div>
</div>
<div id="Gallery" class="mui-slider">
<div class="mui-slider-group gridSlider">
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
</ul>
</div>
<div class="mui-slider-item">
<ul class="mui-table-view mui-grid-view mui-grid-9">
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-2">
<a href="#">
<span class="mui-icon icon"><img src="http://114.215.122.180/pubimg/images/iconset/1/05.png"/></span>
<div class="mui-media-body title">Home</div>
</a>
</li>
</ul>
</div>
</div>
<div class="mui-slider-indicator">
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<ul class="mui-table-view mediaListView">
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
<div class="title">
标题，很长很长的标题，标题的长度超过你的想象，也超过了编辑们的智商
</div>
<p class="mui-ellipsis abstract">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
<span class="addons">1月5日</span>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
<div class="title">
标题，很长很长的标题，标题的长度超过你的想象，也超过了编辑们的智商
</div>
<p class="mui-ellipsis abstract">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
<span class="addons">1月5日</span>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
<div class="title">
标题，很长很长的标题，标题的长度超过你的想象，也超过了编辑们的智商
</div>
<p class="mui-ellipsis abstract">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
<span class="addons">1月5日</span>
</div>
</a>
</li>
<li class="mui-table-view-cell mui-media">
<a href="javascript:;">
<img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
<div class="mui-media-body">
<div class="title">
标题，很长很长的标题，标题的长度超过你的想象，也超过了编辑们的智商
</div>
<p class="mui-ellipsis abstract">能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？</p>
<span class="addons">1月5日</span>
</div>
</a>
</li>
</ul>
</div>
<div class="mui-off-canvas-backdrop"></div>
</div>
</div>
</body>
<script type="text/javascript">
//Initializing this page
mui.init({
swipeBack: false,
statusBarBackground: '#3298cb',
preloadPages: []
});
//Customize Event Listener Set
//Load Home base data
var data = {
slider: [],
homepad: [],
newsList: []
};
var requestUrls = {
slider: '',
homepad: '',
newsList: ''
}
var mobileOS;
var flag_sliderReady = false;
//Plus Ready Function
mui.plusReady(function() {
if(plus.os.name == 'Android') {
mobileOS = '02';
} else if(plus.os.name == 'iOS') {
mobileOS = '01';
}
var netWorkType = {};
netWorkType[plus.networkinfo.CONNECTION_UNKNOW] = "Unknown connection";
netWorkType[plus.networkinfo.CONNECTION_NONE] = "None connection";
netWorkType[plus.networkinfo.CONNECTION_ETHERNET] = "Ethernet connection";
netWorkType[plus.networkinfo.CONNECTION_WIFI] = "WiFi connection";
netWorkType[plus.networkinfo.CONNECTION_CELL2G] = "Cellular 2G connection";
netWorkType[plus.networkinfo.CONNECTION_CELL3G] = "Cellular 3G connection";
netWorkType[plus.networkinfo.CONNECTION_CELL4G] = "Cellular 4G connection";
userInfo = {
"IMEI": plus.device.imei,
"IMSI": plus.device.imsi[0], //部分双卡双待的机器，IMSI可能有2个，这里只取一个
"appName": appName,
"appVersion": '1.45',
"deviceBrand": plus.device.vendor,
"deviceModel": plus.device.model,
"deviceOSVersion": plus.os.version,
"deviceResolution": plus.display.resolutionHeight + "*" + plus.display.resolutionWidth,
"mobileOS": mobileOS,
"netWorkType": netWorkType[plus.networkinfo.getCurrentType()],
"phoneNum": '',
"userKey": ''
};
userInfoJsonString = JSON.stringify(userInfo);
requestLocalityUrl = IPLocalityAddress + appName + '/port/PostServices.aspx?userInfo=' + userInfoJsonString + '&method=';
getSliderNewsData(requestLocalityUrl);
});
function getSliderNewsData(requestUrl) {
var newsData;
mui.ajax(requestUrl + method_News.GetListOfSliderNews, {
dataType: 'json', //服务器返回json格式数据
async: false,
type: 'post', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
headers: {
'Content-Type': 'application/json'
},
success: function(data) {
//服务器返回响应，根据响应结果，分析是否登录成功；
console.log(data);
//装载幻灯片新闻数据
newsData = data.data;
var sliderContainer = mui('#slider')[0];
var headNode, sliderList, tailNode, itemNode, currentNumberTag, totalNumberTag, sliderListLength;
//获取幻灯片新闻的个数
sliderListLength = newsData.hotList.length;
//初始化幻灯片容器的HTML文档
sliderContainer.innerHTML = '<div class="mui-slider-group mui-slider-loop"></div>';
//获取幻灯片列表对象以及总数、当前序号的对象
sliderList = sliderContainer.querySelector('.mui-slider-group');
//循环插入幻灯片数据
for(var i = 0; i < sliderListLength; i++) {
itemNode = document.createElement('div');
if(sliderListLength < 10 && i < 10) {
itemNode.innerHTML = '<a href="' + newsData.hotList[i].webUrl + '"><img src="' + newsData.hotList[i].imageUrl + '"/><p class="mui-slider-title">' + newsData.hotList[i].title + '</p><div class="mui-slider-indicator sliderBadget"><span class="subtitle">0' + (i + 1) +'</span><span class="title">0' + sliderListLength + '</span></a></div>';
} else if(sliderListLength >= 10 && i < 10) {
itemNode.innerHTML = '<a href="' + newsData.hotList[i].webUrl + '"><img src="' + newsData.hotList[i].imageUrl + '"/><p class="mui-slider-title">' + newsData.hotList[i].title + '</p><div class="mui-slider-indicator sliderBadget"><span class="subtitle">0' + (i + 1) +'</span><span class="title">' + sliderListLength + '</span></div></a>';
} else if(sliderListLength >= 10 && i >= 10) {
itemNode.innerHTML = '<a href="' + newsData.hotList[i].webUrl + '"><img src="' + newsData.hotList[i].imageUrl + '"/><p class="mui-slider-title">' + newsData.hotList[i].title + '</p></a>';
}
itemNode.className = 'mui-slider-item';
sliderList.appendChild(itemNode);
}
//根据MUI的要求，要把最后一个幻灯片数据复制成为幻灯片容器第一个数据节点，第一个幻灯片数据复制成为最后一个数据节点
headNode = sliderList.childNodes[0].innerHTML;
tailNode = sliderList.childNodes[sliderListLength - 1].innerHTML;
sliderList.innerHTML = '<div class="mui-slider-item mui-slider-item-duplicate">' + tailNode + '</div>' + sliderList.innerHTML + '<div class="mui-slider-item mui-slider-item-duplicate">' + headNode + '</div>';
console.log(sliderContainer);
//执行自动轮播
mui('#slider').slider({
interval: 1000
});
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
}
</script>
</html>
0 个回复