JS代码
mui.init()
mui.plusReady(function() {
var menuName = new Array('推荐', '高分', '北京', '笑话', '资讯', '娱乐', '职场', '旅游', '艺术', '行业', '生活', '时尚', '公众号'); //栏目
var area = plus.storage.getItem('area');
if (area != null) {
menuName[2] = area;
}
var menuId = new Array(0, 44, 0, 28, 15, 18, 12, 24, 14, 1, 34, 35, 0);
var mobileWidth = plus.screen.resolutionWidth //屏幕宽度
var num = 0;
var div = null;
var li = '',
liWidth = '',
before = '',
after = '',
active = '',
red = '',
id = '';
if (mobileWidth > 320) {
num = 6;
liWidth = 'mui-col-xs-2';
} else {
num = 5;
liWidth = 'm-5';
}
for (var i in menuName) {
active = '';
if (i == 0) {
active = ' class="active"';
}
red = '';
if (i == 1) {
red = ' class="text-red"';
}
id = '';
if (i == 2) {
id = ' id="area"';
}
li += '<li class="mui-table-view-cell mui-media ' + liWidth + '"><a data="' + menuId[i] + '"' + active + id + '><span' + red + '>' + menuName[i] + '</span></a></li>';
if ((Number(i) + 1) % num == 0 || (Number(i) + 1) == menuName.length) {
div = document.createElement("div");
div.className = 'mui-slider-item';
div.innerHTML = '<ul class="mui-table-view mui-grid-view">' + li + '</ul>';
document.getElementById("MenuList").appendChild(div);
if ((Number(i) + 1) == num) {
before = document.createElement("div");
before.className = 'mui-slider-item mui-slider-item-duplicate';
before.innerHTML = '<ul class="mui-table-view mui-grid-view">' + li + '</ul>';
}
if ((Number(i) + 1) == menuName.length) {
after = document.createElement("div");
after.className = 'mui-slider-item mui-slider-item-duplicate';
after.innerHTML = '<ul class="mui-table-view mui-grid-view">' + li + '</ul>';
document.getElementById("MenuList").appendChild(before);
document.getElementById("MenuList").insertBefore(after, document.getElementById("MenuList").firstChild);
}
li = '';
}
}
main = plus.webview.currentWebview();
menu = mui.preload({
id: 'usermenu',
url: 'usermenu.html',
styles: {
left: "30%",
width: '70%',
zindex: 9997
}
});
});
html代码
<div class="mui-content">
<div class="mui-slider" id="Menu">
<div class="mui-slider-group mui-slider-loop" id="MenuList">
</div>
</div>
</div>
有时候打开是正常的从第一页开始显示
但有时候打开是从最后一页开始显示
1 个回复
DCloud_UNI_FXY
把下边这个区域也动态生成。生成后,手动调用一下mui('#Menu').slider();