html中加载更多的代码,swiper手机端上拉刷新加载更多代码

特效描述：swiper手机端 上拉刷新 加载更多代码。swiper手机端上拉刷新加载更多代码

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码



swiper手机端上拉刷新加载更多代码

html, body{height: 100%;font-family: "微软雅黑";}

*{margin: 0;padding: 0;box-sizing: border-box;}

a {color: #428bca;text-decoration: none;}

a:hover,a:focus {color: #2a6496;text-decoration: underline;}

a:focus {outline: thin dotted;outline: 5px auto -webkit-focus-ring-color;outline-offset: -2px;}

.padd_40{padding-top: 80px;background: #F5F5F5;overflow-x:hidden;}

.a{text-align:center;line-height: 40px;position: fixed;top: 0;left: 0;width: 100%;z-index: 10;border-bottom: 1px #ccc solid; background: #f50;color: #fff;}

.tab{display: flex;line-height: 40px;position: fixed;top: 40px;width: 100%;z-index: 10;border-bottom: 1px #ccc solid;}

.tab a{width: 33.333333%;background: #fff;text-align: center;}

.tab .active{border-bottom: 1px #f50 solid; color: #f50;}

.panel{margin: 0;}

.refreshtip {position: absolute;left: 0;width: 100%;margin: 10px 0;text-align: center;color: #999;}

.swiper-container{overflow: visible;}

.loadtip { display: block;width: 100%;line-height: 40px; height: 40px;text-align: center;color: #999;border-top: 1px solid #ddd;}

.swiper-container, .w{height: calc(100vh - 120px);}

.swiper-slide{height: auto;}

.text-center{text-align: center;}

.list-group{padding-left: 0;margin-bottom: 20px;}

.list-group-item{ position: relative; display: block;padding: 10px 15px;margin-bottom: -1px;background-color: #fff;border: 1px solid #ddd;}

.list-group-item:first-child {border-top-left-radius: 4px;border-top-right-radius: 4px;}

标题

tab1

tab2

tab3

下拉可以刷新

下拉可以刷新

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

列表

上拉加载更多

var loadFlag = true;

var oi = 0;

var mySwiper = new Swiper('.swiper-container',{

direction: 'vertical',

scrollbar: '.swiper-scrollbar',

slidesPerView: 'auto',

mousewheelControl: true,

freeMode: true,

onTouchMove: function(swiper){//手动滑动中触发

var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;

var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;

if(mySwiper.translate < 50 && mySwiper.translate > 0) {

$(".init-loading").html('下拉刷新...').show();

}else if(mySwiper.translate > 50 ){

$(".init-loading").html('释放刷新...').show();

}

},

onTouchEnd: function(swiper) {

var _viewHeight = document.getElementsByClassName('swiper-wrapper')[0].offsetHeight;

var _contentHeight = document.getElementsByClassName('swiper-slide')[0].offsetHeight;

// 上拉加载

if(mySwiper.translate <= _viewHeight - _contentHeight - 50 && mySwiper.translate < 0) {

// console.log("已经到达底部！");

if(loadFlag){

$(".loadtip").html('正在加载...');

}else{

$(".loadtip").html('没有更多啦！');

}

setTimeout(function() {

for(var i = 0; i <5; i++) {

oi++;

$(".list-group").eq(mySwiper2.activeIndex).append('

我是加载出来的'+oi+'...');

}

$(".loadtip").html('上拉加载更多...');

mySwiper.update(); // 重新计算高度;

}, 800);

}

// 下拉刷新

if(mySwiper.translate >= 50) {

$(".init-loading").html('正在刷新...').show();

$(".loadtip").html('上拉加载更多');

loadFlag = true;

setTimeout(function() {

$(".refreshtip").show(0);

$(".init-loading").html('刷新成功！');

setTimeout(function(){

$(".init-loading").html('').hide();

},800);

$(".loadtip").show(0);

//刷新操作

mySwiper.update(); // 重新计算高度;

}, 1000);

}else if(mySwiper.translate >= 0 && mySwiper.translate < 50){

$(".init-loading").html('').hide();

}

return false;

}

});

var mySwiper2 = new Swiper('.swiper-container2',{

onTransitionEnd: function(swiper){

$('.w').css('transform', 'translate3d(0px, 0px, 0px)')

$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');

mySwiper.update();

$('.tab a').eq(mySwiper2.activeIndex).addClass('active').siblings('a').removeClass('active');

}

});

$('.tab a').click(function(){

$(this).addClass('active').siblings('a').removeClass('active');

mySwiper2.slideTo($(this).index(), 500, false)

$('.w').css('transform', 'translate3d(0px, 0px, 0px)')

$('.swiper-container2 .swiper-slide-active').css('height','auto').siblings('.swiper-slide').css('height','0px');

mySwiper.update();

});