数据返回是 正常的，界面正常显示的，问题是 左右滑动没反应，但是我把返回的数据写死就可以滑动了。求解。。。。。
<!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">
<!--标准mui.css-->
<link rel="stylesheet" href="css/mui.min.css">
</head>
<body>
<style>
.mui-control-content {
background-color: white;
min-height: 215px;
}
.mui-control-content .mui-loading {
margin-top: 50px;
}
</style>
<div class="mui-content">
<div id="slider" class="mui-slider">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div id='list' class="mui-slider-group">
</div>
</div>
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/Common.js"></script>
<script>
mui.init({
swipeBack: false
});
(function($) {
$.ready(function() {
document.getElementById('sliderSegmentedControl').innerHTML = '';
var settings = app.getSettings();
var state = app.getState();
mui.ajax(UserMenuURL, {
data: {
type: 'AjaxMenu',
method: 'UserMenu',
userid: 1030,
orgid: 1025
},
dataType: 'json', //服务器返回json格式数据
type: 'GET', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
if (!data.IsError) {
var json = JSON.parse(data.Data);
var menu = [];
var submenu = [];
mui.each(json, function(index, item) {
if (item.FParentID == 0) {
menu.push(item);
} else {
submenu.push(item);
}
})
var slider = document.getElementById('sliderSegmentedControl');
mui.each(menu, function(index, item) {
if (item.FParentID == 0) {
var a = document.createElement('a');
a.id = item.FItemID;
a.className = 'mui-control-item';
a.href = '#item' + item.FItemID;
a.innerHTML = item.FMenuName;
slider.appendChild(a);
}
});
console.log(slider.innerHTML);
mui(".mui-control-item").each(function(index, element) {
var div = document.createElement('div');
div.id = 'item' + element.id;
console.log(index == '1');
if (index == '1') {
div.className = 'mui-slider-item mui-control-content mui-active';
} else {
div.className = 'mui-slider-item mui-control-content';
}
document.getElementById("list").appendChild(div); //外围div
var ul = document.createElement('ul');
ul.className = 'mui-table-view mui-grid-view mui-grid-9';
div.appendChild(ul); //外围ul
mui.each(submenu, function(index, item) {
if (element.id == item.FParentID) {
var li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3';
ul.appendChild(li);
var a = document.createElement('a');
a.href = '#';
li.appendChild(a);
var span = document.createElement('span');
span.className = 'mui-icon mui-icon-home';
li.appendChild(span);
var div_name = div.cloneNode();
div_name.removeAttribute('id');
div_name.className = 'mui-media-body';
div_name.innerText = item.FMenuName;
li.appendChild(div_name);
}
});
});
console.log(document.getElementById("list").innerHTML);
} else {
console.log(JSON.stringify(data));
}
},
error: function(xhr, type, errorThrown) {
//异常处理；
console.log(type);
}
});
});
$('.mui-scroll-wrapper').scroll({
indicators: true //是否显示滚动条
});
var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
$('.mui-input-group').on('change', 'input', function() {
if (this.checked) {
sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-' + this.value;
//force repaint
sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
}
});
})(mui);
</script>
</body>
</html>
SkyGrass (作者)
先谢过。
2015-09-18 08:48
1***@qq.com
正解
2019-02-15 16:20