<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<div class="mui-scroll" id="sliderNav">
</div>
</div>
<div class="mui-slider-group" id="groupcontend">
</div>
</div>
</body>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
mui.init()
mui.plusReady(function() {
var js = {
"AA": {
"YY": ["AA", "BB", "CC", "DD", "EE", "FF"],
"XX": ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"]
},
"BB": {
"YY": ["AA", "BB", "CC", "DD", "EE", "FF"],
"XX": ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"]
},
"CC": {
"YY": ["AA", "BB", "CC", "DD", "EE", "FF"],
"XX": ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"]
},
"DD": {
"YY": ["AA", "BB", "CC", "DD", "EE", "FF"],
"XX": ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"]
},
"EE": {
"YY": ["AA", "BB", "CC", "DD", "EE", "FF"],
"XX": ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"]
},
"FF": {
"YY": ["AA", "BB", "CC", "DD", "EE", "FF"],
"XX": ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"]
},
"GG": {
"YY": ["AA", "BB", "CC", "DD", "EE", "FF"],
"XX": ["aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh", "aa", "bb", "cc", "dd", "ee", "ff", "gg", "hh"]
},
}
conn(js);
})
function conn(js) {
var nav = mui('#sliderNav')[0];
var con = mui('#groupcontend')[0];
var i = 0;
mui.each(js, function(index, val) {
var a = document.createElement('a');
if(i == 0) {
a.className = 'mui-control-item mui-active';
} else {
a.className = 'mui-control-item';
}
a.href = 'href="#item' + i;
a.innerHTML = index;
nav.appendChild(a);
var div1 = document.createElement('div');
div1.className = 'mui-slider-item mui-control-content';
div1.id = 'item' + i;
var div2 = document.createElement('div');
div2.className = 'mui-scroll-wrapper';
var div3 = document.createElement('div');
div3.className = 'mui-scroll'
mui.each(val, function(x, y) {
var h = document.createElement('h5');
h.innerHTML = x;
div3.appendChild(h);
var ul = document.createElement('ul');
ul.className = 'mui-table-view mui-grid-view';
ul.id = 'sliderul';
mui.each(y, function(n, m) {
var li = document.createElement('li')
li.className = 'mui-table-view-cell mui-col-xs-4';
li.innerHTML = '<a href="' + '#' + '"><img class="mui-media-object" src="' + 'images/124124.jpg' + '"><span class="mui-media-body ">' + m + '</span></a>';
ul.appendChild(li);
})
div3.appendChild(ul);
div2.appendChild(div3);
div1.appendChild(div2)
con.appendChild(div1);
});
i++;
});
//
mui('.mui-scroll-wrapper').scroll({
indicators: true, //是否显示滚动条
});
}
</script>
</html>
这段代码放到了
mui('.mui-scroll-wrapper').scroll({
indicators: true, //是否显示滚动条
});
mui.Ready()中就不能左右滑动，有办法解决吗？谢谢
3 个回复
lhyh - 目前就职成都
基础：js中这样的格式(function(XXXX){ })(CCCC),只是为了确保函数一定会执行而已，同时这样书写则是将参数CCCC传递给XXXX，可自行搜索，js中一对小括号的作用。
改写下面这样就可以了
Peach (作者)
谢谢！代码可以执行！
没放到 mui.Ready()中一切正常，放到mui.Ready()中就不可以左右滑动了，可能还有什么问题吧，
lhyh
多看看文档，理解清楚 mui.init() ,mui.ready,mui.plusready这三个的定义你就知道该怎么做了
2016-07-29 15:10
Peach (作者)
我在研究一下，非常谢谢
2016-07-29 15:13
Peach (作者)
这段代码放到了
mui('.mui-scroll-wrapper').scroll({
indicators: true, //是否显示滚动条
});
mui.Ready()中就不能左右滑动，有办法解决吗？谢谢