<!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" />
<link href="css/TopBottomScroll.css" />
</head>
<body>
<div id="slider" class="mui-slider mui-fullscreen">
<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1mobile">
公司新闻
</a>
<a class="mui-control-item" href="#item2mobile">
媒体关注
</a>
<a class="mui-control-item" href="#item3mobile">
最新公告
</a>
</div>
<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<div id="item1mobile" class="mui-slider-item mui-control-content mui-active mui-content">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
第一个选项卡子项-1
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-2
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-3
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-4
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-5
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-6
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-7
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-8
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-9
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-10
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-11
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-12
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-13
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-14
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-15
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-16
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-17
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-18
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-19
</li>
<li class="mui-table-view-cell">
第一个选项卡子项-20
</li>
</ul>
</div>
</div>
</div>
<div id="item2mobile" class="mui-slider-item mui-control-content">
<div id="scroll2" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
<div id="item3mobile" class="mui-slider-item mui-control-content">
<div id="scroll3" class="mui-scroll-wrapper">
<div class="mui-scroll">
<div class="mui-loading">
<div class="mui-spinner">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/mui.min.js"></script>
<script src="js/TopBootomScroll.js"></script>
<script type="text/javascript">
mui.init();
(function($) {
var createFragment = function(ul, index, count, reverse) {
var length = ul.querySelectorAll('li').length;
var fragment = document.createDocumentFragment();
var li;
for (var i = 0; i < count; i++) {
li = document.createElement('li');
li.className = 'mui-table-view-cell';
li.innerHTML = '<a href="javascript:;">'
+' <img class="mui-media-object mui-pull-left" src="images/slider/slider_image_6.jpg">'
+' <div class="mui-media-body">'
+' 房子限购,股票大跌'
+' <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>'
+' </div>'
+'</a>';
fragment.appendChild(li);
}
return fragment;
};
var html2 = '<ul class="mui-table-view"></ul>';
var html3 = '<ul class="mui-table-view"></ul>';
var item2 = document.getElementById('item2mobile');
var item3 = document.getElementById('item3mobile');
document.getElementById('slider').addEventListener('slide', function(e) {
if (e.detail.slideNumber === 1) {
if (item2.querySelector('.mui-loading')) {
setTimeout(function() {
item2.querySelector('.mui-scroll').innerHTML = html2;
var ul = item2.querySelector('.mui-scroll').querySelector("ul");
ul.appendChild(createFragment(ul,0,20,""));
}, 500);
}
} else if (e.detail.slideNumber === 2) {
if (item3.querySelector('.mui-loading')) {
setTimeout(function() {
item3.querySelector('.mui-scroll').innerHTML = html3;
var ul = item3.querySelector('.mui-scroll').querySelector("ul");
ul.appendChild(createFragment(ul,0,20,""));
}, 500);
}
}
});
$("#scroll1").TopBootomScroll({
down:{
callback: function(sllef) {
setTimeout(function(){
sllef.removeTopStyle();
},5000);
}
},
up: {
callback: function(sllef) {
setTimeout(function(){
sllef.removeButtonStyle();
},5000);
}
}
});
$("#scroll2").TopBootomScroll({
down:{
callback: function(sllef) {
setTimeout(function(){
sllef.removeTopStyle();
},5000);
}
},
up: {
callback: function(sllef) {
setTimeout(function(){
sllef.removeButtonStyle();
},5000);
}
}
});
$("#scroll3").TopBootomScroll({
down:{
callback: function(sllef) {
setTimeout(function(){
sllef.removeTopStyle();
},5000);
}
},
up: {
callback: function(sllef) {
setTimeout(function(){
sllef.removeButtonStyle();
},5000);
}
}
});
})(mui);
</script>
</body>
</html>
TopBootomScroll.js
(function($){
$.fn.TopBootomScroll = function(options){
var obl = true;
if(options){
obl = false;
}
$(this).scroll({
indicators: true //是否显示滚动条
});
options = options || {};
options = $.extend(true,{
down:{
obl:false,
Y:50,//下拉超出的(downY)长度,开始加载
callback: function(sllef) {}
},
up: {
obl:false,
Y:50,//上拉超出的(downY)长度,开始加载
callback: function(sllef) {}
}
},options);
this.each(function() {
var sllef = this;
sllef.options = options;
sllef.removeTopStyle = function(){
if(this.querySelector(".mui-scroll").querySelector(".topStyle") != null){
this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".topStyle"));
}
};
sllef.removeButtonStyle = function(){
if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") != null){
this.querySelector(".mui-scroll").removeChild(this.querySelector(".mui-scroll").querySelector(".buttonStyle"));
console.info("scrollerWidth:"+sllef.scrollerWidth)
$(this).scroll().scrollTo(0,-(sllef.scrollerWidth-this.options.up.Y-10),100);
}
};
sllef.addEventListener("scroll",function(e){
console.info(e.detail.scrollerWidth);
sllef.scrollerWidth = e.detail.scrollerWidth;
console.info("scroll")
if(e.detail.lastY == 0){
console.info("下拉到顶部")
console.info("lastY:"+e.detail.lastY)
console.info("maxScrollY:"+e.detail.maxScrollY)
if(obl){
setTimeout(function(){
sllef.removeTopStyle();
},500);
}
if(options.down.obl){
var html = '<div class="mui-loading">'
+ '<div class="mui-spinner">'
+ '</div>'
+ '<div class="mui-pull-caption">正在加载中...</div>'
+'</div>';
this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = html;
options.down.obl = false;
options.down.callback(this);
}else{
sllef.removeTopStyle();
}
}else if(e.detail.lastY > 0){
console.info("下拉超过顶部")
console.info(this.querySelector(".mui-scroll").querySelector(".topStyle") == null)
if(this.querySelector(".mui-scroll").querySelector(".topStyle") == null){
var div = document.createElement("div");
div.className = "topStyle";
div.innerHTML = "下拉可以刷新";
var fragment = document.createDocumentFragment();
fragment.appendChild(div);
this.querySelector(".mui-scroll").insertBefore(div,this.querySelector(".mui-scroll").firstChild);
}
console.info(options.down.Y)
console.info(e.detail.lastY)
console.info(e.detail.lastY >= options.down.Y)
if(e.detail.lastY >= options.down.Y){
this.querySelector(".mui-scroll").querySelector(".topStyle").innerHTML = "释放立即刷新";
options.down.obl = true;
}
console.info("lastY:"+e.detail.lastY)
}else if(e.detail.lastY == e.detail.maxScrollY){
console.info("上拉到底部")
if(obl){
setTimeout(function(){
sllef.removeButtonStyle();
},500);
}
if(options.up.obl){
var html = '<div class="mui-loading">'
+ '<div class="mui-spinner">'
+ '</div>'
+ '<div class="mui-pull-caption">正在加载中...</div>'
+'</div>';
this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = html;
options.up.obl = false;
options.up.callback(this);
}else{
sllef.removeButtonStyle();
}
}else if(e.detail.lastY < e.detail.maxScrollY){
console.info("上拉超过底部")
if(this.querySelector(".mui-scroll").querySelector(".buttonStyle") == null){
var div = document.createElement("div");
div.className = "buttonStyle";
div.innerHTML = "上拉可以刷新";
this.querySelector(".mui-scroll").appendChild(div);
}
console.info("lastY:"+e.detail.lastY)
console.info(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y)
if(e.detail.lastY - e.detail.maxScrollY <= -options.up.Y){
this.querySelector(".mui-scroll").querySelector(".buttonStyle").innerHTML = "释放立即刷新";
options.up.obl = true;
}
}
});
});
};
$("#scroll1").TopBootomScroll({
down:{
callback: function(sllef) {
setTimeout(function(){
sllef.removeTopStyle();
},5000);
}
},
up: {
callback: function(sllef) {
setTimeout(function(){
sllef.removeButtonStyle();
},5000);
}
}
});
})(mui);
TopBottomScroll.css
.topStyle,.buttonStyle{
text-align: center;
padding: 5px;
}
.topStyle .mui-loading,.buttonStyle .mui-loading{
margin-top: 0;
}
.topStyle{
border-bottom: 1px solid #E4E3E6;
}
.buttonStyle{
border-top: 1px solid #E4E3E6;
}
.topStyle .mui-loading .mui-spinner,.buttonStyle .mui-loading .mui-spinner{
display: inline-block;
vertical-align: middle;
margin-right: 7px;
}
4 个评论
要回复文章请先登录或注册
Dumnness
代码江湖
代码江湖
新手大白