<!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">
<link rel="stylesheet" href="css/classify.css" />
<script src="js/rem.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<header class="mui-bar mui-bar-nav">
<h1 class="mui-title">分类</h1>
</header>
<div class="mui-content">
<div id="slider" class="mui-slider mui-fullscreen">
<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-3"></div>
<div class="mui-slider-group">
</div>-->
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/mui.pullToRefresh.js"></script>
<script src="js/mui.pullToRefresh.material.js"></script>
<script src="js/mui.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script src="js/mui.lazyload.img.js" type="text/javascript" charset="utf-8"></script>
<script>
/*
* 分类名 data.data.name
* */
var deceleration = mui.os.ios ? 0.003 : 0.0009;
function reload() {
//循环初始化所有下拉刷新，上拉加载。
mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
mui(pullRefreshEl).pullToRefresh({
down: {
callback: function() {
var self = this;
}
}
});
});
mui('.mui-slider-group').imageLazyload({
placeholder: 'images/60x60.gif',
destroy: false
});
mui('.mui-scroll-wrapper').scroll({
bounce: true,
indicators: true, //是否显示滚动条
deceleration: deceleration
});
}
function getTwoClassify(index) {
mui.ajax('data/twoClassify.json', {
data: {
},
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var data = data[index].data;
var ul = document.createElement('ul');
ul.className = "item-list"
for(var i = 0; i < data.length; i++) {
var _liData = data[i];
var li = document.createElement('li');
li.className = "item";
var _html = '<div class="item-header">' +
'<span class="item-title">' + _liData.secondName + '</span>' +
'</div>' +
'<div class="item-content">' +
'<ul>';
for(var j = 0; j < _liData.thirds.length; j++) {
var _childLiData = _liData.thirds[j];
_html += '<li>' +
'<div>' +
'<img alt="" data-preview-src="" data-lazyload="' + _childLiData.thirdImage + '" src="">' +
'</div>' +
'<p>' + _childLiData.thirdName + '</p>';
'</li>'
}
_html += '</ul>' +
'</div>'
li.innerHTML = _html;
ul.appendChild(li);
}
document.querySelector('#item' + index + 'mobile .mui-scroll').appendChild(ul).previousElementSibling.remove();
reload();
},
error: function(xhr, type, errorThrown) {
}
});
}
(function($) {
// //http://www.weishang0001.com/app/typeItem
var scroll = document.querySelector('#scroll');
var sliderSegmentedControl = document.querySelector('#sliderSegmentedControl');
mui.ajax('data/oneClassify.json', {
data: {
// parentId:1
},
dataType: 'json', //服务器返回json格式数据
type: 'get', //HTTP请求类型
timeout: 10000, //超时时间设置为10秒；
success: function(data) {
var data = data.data;
var active;
var sliderProgressBar = document.createElement('div');
sliderProgressBar.id = 'sliderProgressBar';
sliderProgressBar.className = 'mui-slider-progress-bar mui-col-xs-3';
var mui_slider_group = document.createElement('div');
mui_slider_group.className = "mui-slider-group";
for(var i = 0; i < data.length; i++) {
var _data = data[i];
var a = document.createElement('a');
var item = document.createElement('div');
item.id = 'item' + i + 'mobile';
if(i == 0) {
a.className = "mui-control-item mui-active";
item.className = 'mui-slider-item mui-control-content mui-active'
} else {
a.className = "mui-control-item";
item.className = 'mui-slider-item mui-control-content';
}
a.href = '#item' + i + 'mobile';
a.innerHTML = _data.name
sliderSegmentedControl.appendChild(a);
item.innerHTML = '<div id=scroll' + i + ' class="mui-scroll-wrapper">' +
'<div class="mui-scroll">' +
'<div class="mui-loading">' +
'<div class="mui-spinner">' +
'</div>' +
'</div>' +
'</div>' +
'</div>';
mui_slider_group.appendChild(item);
slider.appendChild(sliderProgressBar);
slider.appendChild(mui_slider_group);
mui.init({
swipeBack:false
});
}
},
error: function(xhr, type, errorThrown) {}
});
getTwoClassify(0);
//阻尼系数
document.getElementById('slider').addEventListener('slide', function(e) {
console.log(e);
// if (e.detail.slideNumber === 1) {
// if (item2.querySelector('.mui-loading')) {
// setTimeout(function() {
// item2.querySelector('.mui-scroll').innerHTML = html2;
// }, 500);
// }
// } else if (e.detail.slideNumber === 2) {
// if (item3.querySelector('.mui-loading')) {
// setTimeout(function() {
// item3.querySelector('.mui-scroll').innerHTML = html3;
// }, 500);
// }
// }
});
})(mui);
</script>
</body>
</html>
1***@qq.com
- 发布：2017-06-16 12:28
- 更新：2017-06-16 12:29
- 阅读：1616
0 个回复