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

只有五个页面实现动态加载翻页效果，网上查到都是用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，最后一条会重复，有心的朋友可以自行研究找出解决方案。

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

android 上下翻页素材,【Android 进阶】仿抖音系列之翻页上下滑切换视频（四）...
前言大家好,这是这个系列的第四篇,在阅读这篇文章之前,建议可以先看下之前系列的文章,为了节省篇幅,之前详细说过的地方,这里就不再详细描述了: 这一篇,要说实现的是第一篇中的翻页切换视频. 思路在第 ...
仿抖音视频自动播放html,vue 仿抖音视频播放切换
一.第一部分html页面的准备 {{item.title}} {{item.introduction}} 二.数据说明部分 data() { let u = navigator.userAgent; ...
仿抖音视频双指缩放和单指滑动效果
最近刷抖音看视频时,对一个视频某个位置比较感兴趣,采用双指放大查看细节,然后还可以随意滑动到任何位置,比较感兴趣,决定自己来实现此效果: 分析效果:ViewPager左右滑动,视频列表上下滑动+下拉刷 ...
微信小程序原生实现抖音的视频翻页效果
效果如下图 : 具体实现, 用scroll-view video cover-view, 滑动结束后只展示当前视频品和当前前后的两个视频, 代码就不贴了, 因为代码一大堆, 包含了一些点赞.评论.转发 ...
android仿抖音上下切换视频,微信小程序仿抖音视频之整屏上下切换功能的实现代码...
Page({ /** * 页面的初始数据 */ data: { video_list:[ {video_src:}, {video_src:}, {video_src:}, {video_src:}, ...
H5网页播放器EasyPlayer.js播放器界面的加载效果无法消失是什么原因？
EasyPlayer支持视频播放画面秒开,画质高清.性能稳定,可支持的视频流格式有RTSP.RTMP.HLS.FLV.WebRTC等.我们也提供了简单易用的SDK及API接口,用户可以根据自己的需求, ...
【Android 进阶】仿抖音系列之列表播放视频（二）
上一篇中,我们实现了仿抖音上下翻页切换视频的效果,详见[Android 进阶]仿抖音系列之翻页上下滑切换视频(一),这一篇,我们来实现抖音列表播放视频. [Android 进阶]仿抖音系列之翻页上下滑 ...
【Android 进阶】仿抖音系列之列表播放视频（三）
在上一篇[Android 进阶]仿抖音系列之列表播放视频(二)中,我们实现列表播放视频,这一篇我们来对其做些优化. [Android 进阶]仿抖音系列之翻页上下滑切换视频(一) [Android 进阶 ...
仿抖音写上下滑动切换视频
公司小程序要做个仿抖音上下切换视频的效果,一开始想用swiper,有资料说多了会卡.原因是video标签太多的原因,查看资料有只是用一个video标签的,滑动时切换src即可全部代码 <tem ...

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

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

最新文章

热门文章