H5仿抖音上下切换翻页动态加载效果

最新推荐文章于 2024-06-13 18:47:25 发布

yywxp886

最新推荐文章于 2024-06-13 18:47:25 发布

阅读量2.5k

点赞数 4

分类专栏：小技巧文章标签： javascript css html html5

本文链接：https://blog.csdn.net/qq_43493613/article/details/112607370

版权

小技巧专栏收录该内容

11 篇文章 0 订阅

订阅专栏

只有五个页面实现动态加载翻页效果，网上查到都是用Swiper 不停的插入元素，导致页面内容越来越多致卡顿。这里就只用五个页面来轮翻显示，实现无限加载的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>slider</title>
<style>
*{
    padding:0;
    margin:0;
}
html ,
body ,
#slider {
    height:100%;
    overflow: hidden;
}
.s-list{
    height:1000%;
    /*-webkit-transition:.3s;*/
    -webkit-transform:translate3d(0px,0px,0px);
}
.s-list>li{
    height:10%;
}
.s-list>li:nth-child(1){background:#00be9c;}
.s-list>li:nth-child(2){background:#50d78a;}
.s-list>li:nth-child(3){background:#2c97df;}
.s-list>li:nth-child(4){background:#9c56b8;}
.s-list>li:nth-child(5){background:#C66;}
</style>
</head>
<body>
      
  
  
<section id="slider">
    <ul class="s-list">
        <li id="movie_0">第一屏</li>
        <li id="movie_1">第二屏</li>
        <li id="movie_2">第三屏</li>
        <li id="movie_3">第四屏</li>
        <li id="movie_4">第五屏</li>
    </ul>
</section>
  
  
  
<script>
var Adata=new Array();
var page=-1;//加载数据页码 这里是从0开始
var allnums=6;//数据总页数
var Tops=false;//最顶端 第一个 不可拉

//拨拉控制
function slider( id ){
	//获取所要的 DOM 元素
	var oSlider = document.getElementById('slider');
	var oUl = oSlider.getElementsByTagName('ul')[0];
	var aLi = oUl.getElementsByTagName('li');
	var winHeight = document.body.clientHeight;
	var startY , offsetY , num = 1 , addNum = 0 ;
	
	//获取百分比高度
	oUl.style.height = 100 * aLi.length +'%';
	for( var i = 0 , len = aLi.length ; i < len ; i++  ){
		aLi[i].style.height = 100 /  aLi.length +'%';
	}
	oUl.style['-webkit-transition']='.3s';
	oUl.style['-webkit-transform'] = 'translate3d(0px,'+ -winHeight +'px,0px)';

	//开始
	var sliderStart = function( event ){
		this.startY = event.touches[0].pageY;
	}


	//移动
	var sliderMove = function( event ){
		//单手操作才执行
		if ( event.targetTouches.length == 1 ) {
			event.preventDefault();　　　　　　　　　　　　　　　　　　　　
			//获取移动的距离
			this.offsetY = event.targetTouches[0].pageY - this.startY ;

			var addNum = this.offsetY + parseInt(window.getComputedStyle( oUl  , null)['-webkit-transform'].replace(/[a-z()]/g , '').split(',')[5]);
			
			//防止跨屏
			if ( this.offsetY > 0 ) {
				if ( addNum > -winHeight * (num - 1) ) {
					addNum = -winHeight * (num - 1);
				}
			}else{
				if ( addNum < -winHeight * (num + 1) ) {
					addNum = -winHeight * (num + 1);
				}
			}
			oUl.style['-webkit-transition']='.3s';
			oUl.style['-webkit-transform'] = 'translate3d(0px,'+ addNum +'px,0px)';
		}
	}


	//结束
	var sliderEnd = function(){
		var Bend=false,Tend=false;
		oUl.style['-webkit-transition']='.3s';
		Tops=false;
		//负数为往上，正数为往下
		if ( this.offsetY > 0 ) {
			if(page>0){
				if ( num > 0 ) {
					num--;
					if(num== 0){Tend=true;}
				}else{
					num = 0;
					Tops=true;
				}
			}
			num =Loadmovie(num,true);
		}else if ( this.offsetY < 0 ) {
			 if(page<allnums){
				if ( num < aLi.length - 1 ) {
					num++;
					if(num== aLi.length - 1){Bend=true;}
				}else{
					num = aLi.length -1;
				}
			 }
			num =Loadmovie(num,false);
		}
　　　　　　　　//清空防止点击切换　　　　　　　
		this.offsetY = 0;
		//真实的切换
		oUl.style['-webkit-transform'] = 'translate3d(0px,'+ -num*winHeight +'px,0px)';
		//console.log(num*winHeight);
		if(Bend){
			num = 1;
			setTimeout(RStart,300);
		}
		if(Tend){
			num = aLi.length -2;
			setTimeout(RStart,300);
		}

		//oUl.style['-webkit-transform'] = 'translate(0px,'+ -num*winHeight +'px)';

		//让累加数值为当前页面切换到的数值
		addNum = -num*winHeight;
	}
	var RStart = function(){
		oUl.style['-webkit-transition']='0s';
		oUl.style['-webkit-transform'] = 'translate(0px,'+ -(num)*winHeight +'px)';
		showmovie(num);
	}

	//让最顶层的 DIV 处理事件，然而 ul 根据，最顶层的 DIV 操作来移动
	oSlider.addEventListener('touchstart' , sliderStart);
	oSlider.addEventListener('touchmove' , sliderMove);
	oSlider.addEventListener('touchend' , sliderEnd);
}

//测试数据集 注意如果第一组只有两个数据时
Adata[0]={"errors":"0","items":[{"id":"1","title":"0","url":"0"},{"id":"2","title":"链接一","url":"A"},{"id":"3","title":"链接二","url":"B"}]};
Adata[1]={"errors":"0","items":[{"id":"2","title":"链接一","url":"B"},{"id":"3","title":"链接二","url":"C"},{"id":"4","title":"链接三","url":"D"}]};
Adata[2]={"errors":"0","items":[{"id":"2","title":"链接二","url":"B"},{"id":"3","title":"链接三","url":"C"},{"id":"4","title":"链接四","url":"D"}]};
Adata[3]={"errors":"0","items":[{"id":"3","title":"链接三","url":"C"},{"id":"4","title":"链接四","url":"D"},{"id":"5","title":"链接五","url":"E"}]};
Adata[4]={"errors":"0","items":[{"id":"4","title":"链接四","url":"D"},{"id":"5","title":"链接五","url":"E"},{"id":"6","title":"链接六","url":"F"}]};
Adata[5]={"errors":"0","items":[{"id":"5","title":"链接五","url":"E"},{"id":"6","title":"链接六","url":"F"},{"id":"7","title":"链接七","url":"G"}]};
Adata[6]={"errors":"0","items":[{"id":"6","title":"链接六","url":"F"},{"id":"7","title":"链接七","url":"G"},{"id":"7","title":"链接七","url":"G"}]};
allnums=Adata.length;


//加载数据 当前显示窗口序号,true下划,false上划
function Loadmovie(num,updown){
	if(Tops){return num;}
	if(updown){
		page--;
		if(page<0){page=0;}
	}else{
		page++;
		if(page>=allnums){page=allnums;return num;}
	}
	
	showmovie(num);
	return num;
}
function showmovie(num){
	if(page>=allnums){page=allnums-1;}
	Mdata=Adata[page].items;
	if(num==0){
		document.getElementById('movie_0').innerHTML='第一屏'+Mdata[0].id+':'+Mdata[0].title+':'+Mdata[0].url;
		document.getElementById('movie_3').innerHTML='第四屏'+Mdata[0].id+':'+Mdata[0].title+':'+Mdata[0].url;
		if(Mdata.length<2){return num--;}
		document.getElementById('movie_1').innerHTML='第二屏'+Mdata[1].id+':'+Mdata[1].title+':'+Mdata[1].url;
		if(Mdata.length==2){return num--;}
		document.getElementById('movie_2').innerHTML='第三屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
		document.getElementById('movie_3').innerHTML='第四屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
	}else if(num==1){
		document.getElementById('movie_0').innerHTML='第一屏'+Mdata[0].id+':'+Mdata[0].title+':'+Mdata[0].url;
		document.getElementById('movie_3').innerHTML='第四屏'+Mdata[0].id+':'+Mdata[0].title+':'+Mdata[0].url;
		if(Mdata.length==1){return num--;}
		document.getElementById('movie_1').innerHTML='第二屏'+Mdata[1].id+':'+Mdata[1].title+':'+Mdata[1].url;
		if(Mdata.length==2){return num--;}
		document.getElementById('movie_2').innerHTML='第三屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
		document.getElementById('movie_3').innerHTML='第四屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
	}else if(num==2){
		document.getElementById('movie_1').innerHTML='第二屏'+Mdata[0].id+':'+Mdata[0].title+':'+Mdata[0].url;
		if(Mdata.length==1){return num--;}
		document.getElementById('movie_2').innerHTML='第三屏'+Mdata[1].id+':'+Mdata[1].title+':'+Mdata[1].url;
		if(Mdata.length==2){return num--;}
		document.getElementById('movie_3').innerHTML='第四屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
		document.getElementById('movie_4').innerHTML='第五屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
	}else if(num==3){
		document.getElementById('movie_2').innerHTML='第三屏'+Mdata[0].id+':'+Mdata[0].title+':'+Mdata[0].url;
		if(Mdata.length==1){return num--;}
		document.getElementById('movie_3').innerHTML='第四屏'+Mdata[1].id+':'+Mdata[1].title+':'+Mdata[1].url;
		if(Mdata.length>2){
			document.getElementById('movie_4').innerHTML='第五屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
			document.getElementById('movie_1').innerHTML='第二屏'+Mdata[2].id+':'+Mdata[2].title+':'+Mdata[2].url;
		}
	}
}
slider('slider');
Loadmovie(0,false);//加载初始数据
</script>
</body>
</html>

数据是每次调用当前数据和前一条加后一条一共三条信息，不够三条的要补齐。有一个BUG，最后一条会重复，有心的朋友可以自行研究找出解决方案。

yywxp886

关注

4
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
H5仿抖音上下切换翻页动态加载效果

只有五个页面实现动态加载翻页效果，网上查到都是用Swiper 不停的插入元素，导致页面内容越来越多致卡顿。这里就只用五个页面来轮翻显示，实现无限加载的效果。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,target-densitydpi=high-dpi,in
复制链接

扫一扫