/**
* 上拉加载具体业务实现
*/
function pullupRefresh() {
console.log('上');
var __data = getData(index);
mui('#pullrefresh').pullRefresh().endPullupToRefresh((index >= data.data.goods.length)); //参数为true代表没有更多数据了。
var table = document.body.querySelector('.mui-card-list');
var cells = document.body.querySelectorAll('.mui-card');
for(var i = 0; i < __data.length; i++) {
var _data = __data[i];
var div = document.createElement('div');
var _html = '';
div.className = 'mui-card';
_html +=
'<div class="mui-card-header mui-card-media">' +
'<img data-lazyload="' + _data.image + '"/>' +
'<div class="mui-media-body">' +
_data.sourceAddressType +
'<p>发表于 ' + formatDateTime(_data.time, "yyyy-MM-dd HH:mm") + ' </p>' +
'</div>' +
'</div>' +
'<div class="mui-card-content">' +
'<p class="list-describe">' + _data.name + '</p>' +
'<ul>';
for(var j = 0; j < _data.banners.length; j++) {
_html +=
'<li>' +
'<img data-lazyload="' + _data.banners[j].src + '" alt="" data-preview-src="" data-preview-group=' + i + '/>' +
'</li>';
}
_html +=
'</ul>' +
'</div>' +
'<div class="mui-card-footer">' +
'<a class="mui-card-link">收藏</a>' +
'<a class="mui-card-link">转发</a>' +
'<a class="mui-card-link">下单</a>' +
'</div>';
div.innerHTML = _html;
table.appendChild(div);
}
lazyload(cells.length);
}
if(mui.os.plus) {
mui.plusReady(function() {
setTimeout(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
}, 10);
});
} else {
mui.ready(function() {
mui('#pullrefresh').pullRefresh().pullupLoading();
});
}
function lazyload(gtValue) {
mui.previewImage();
console.log(gtValue);
if(gtValue) {
var mui_card = mui('.mui-card');
var mui_card_list = [];
for(var i = gtValue; i < mui_card.length; i++) {
mui_card_list.push(mui_card[i]);
}
mui(mui_card_list).imageLazyload({
placeholder: 'images/60x60.gif',
destroy: false
});
} else {
mui('.mui-card').imageLazyload({
placeholder: 'images/60x60.gif',
destroy: false
});
}
}
1***@qq.com
- 发布：2017-06-15 16:48
- 更新：2017-06-16 12:36
- 阅读：2062
1***@qq.com (作者)
<!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:36
1***@qq.com (作者)
完整DEMO的话 这里上传不了啊 能加QQ发给你么
2017-06-16 12:40
n***@gmail.com
可以上传附件
2017-06-19 10:29