tab选项卡下拉刷新上拉加载代码swiper特效

来源:https://www.sucaihuo.com/js/1940.html 2017-05-15 15:20浏览(4004) 收藏

tab选项卡下拉刷新上拉加载代码,手机滑动或鼠标左键拖动,兼容PC端和移动端,列表加载数量可以自由控制。
tab选项卡下拉刷新上拉加载代码swiper特效
分类:选项卡/滑动门 > 列表切换 难易:
查看演示 下载资源 下载积分: 30 积分

根据swiper特效修改制作,onTouchMove、onTouchEnd触发不同的事件响应,支持手机滑动或鼠标左键拖动。

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 <3; i++) {
                    	oi++;
                        $(".list-group").eq(mySwiper2.activeIndex).append('<li class="list-group-item">上拉加载出来的'+oi+'...</li>');
                    }
                     $(".loadtip").html('上拉加载更多...');
                    mySwiper.update(); // 重新计算高度;
                }, 800);
            }

评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2