原生JS实现移动端上下滑动一次一屏（仿抖音）

功能如下:

头部：附近、关注、推荐选项卡的切换
左右滑动功能、头部选项卡跟随动画
上下滑动划动一屏，滑动超过头部刷新
双击选项卡回到顶部

上代码：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;-moz-user-select: none;/*火狐*/-webkit-user-select: none;/*webkit浏览器*/-ms-user-select: none;/*IE10*/-khtml-user-select: none;/*早期浏览器*/user-select: none;}#box {width: 350px;height: 500px;margin: 30px auto;border-radius: 5px;box-shadow: 0px 0px 27px -3px red;-webkit-border-radius: 5px;-moz-border-radius: 5px;-ms-border-radius: 5px;-o-border-radius: 5px;overflow: hidden;position: relative;background-color: #ccc;}.childbox {width: 300%;height: 100%;display: flex;position: absolute;top: 0;left: 0;}.childbox>div {flex: 1;height: 100%;}.child1 {background-color: salmon;}.child2 {background-color: greenyellow;}.child3 {background-color: blueviolet;}.nav_box {position: absolute;width: 100%;text-align: center;line-height: 50px;}.nav_box div {display: inline-block;color: #fff;margin: 0 5px;position: relative;}.active_nav::before {content: '';position: absolute;background-color: #fff;left: 2px;bottom: 7px;width: 27px;height: 2px;}.childbox>div {position: relative;}.childbox>div .listview {width: 100%;position: absolute;}.view_child {text-align: center;line-height: 200px;color: #fff;font-size: 25px;}</style>
</head><body><div id="box"><div class="childbox"><div class="child1"><div class="listview" type="附近"></div></div><div class="child2"><div class="listview" type="关注"></div></div><div class="child3"><div class="listview" type="推荐"></div></div></div><div class="nav_box"><div>附近</div><div>关注</div><div class="active_nav">推荐</div></div></div>
</body>
<script>//获取动画盒子let childbox = document.querySelector('.childbox')//获取屏幕的高度let viewheight = document.querySelector('#box').offsetHeight//获取所有的导航let childnav = document.querySelector('.nav_box').querySelectorAll('div')//获取视频类型盒子let viewlist = document.querySelectorAll('.listview')//导航索引（0,附近,1,关注，2推荐）let indextype = 2//视频播放的索引(0:附近,1:关注,2:推荐)[下标,视频的数量,页码]let view_index = {0: [0, 0, 1],1: [0, 0, 1],2: [0, 0, 1]}//初始化导航set_nav_active(indextype)//导航选中状态function set_nav_active(index) {//清除选中状态for (let i = 0; i < childnav.length; i++) {childnav[i].className = ''}//给选中的加上值childnav[index].className = 'active_nav'//改变盒子位置childbox.style.left = index * -100 + '%'}//给导航加点击事件for (let i = 0; i < childnav.length; i++) {childnav[i].onclick = function () {//加上过渡动画childbox.style.transition = 'all 0.5s'//改变点击导航状态indextype = iset_nav_active(indextype)}}//左右滑动let box = document.querySelector('#box')//动画是否结束的状态let transition_status = true//按下box.onmousedown = function (event) {//判断是否可以执行动画if (!transition_status) {return}//获取坐标值let startY = event.clientYlet startX = event.clientX//是否要进判断let t_l_type = true//获取上下还是左右滑动的状态(0:不动;1:左右;2:上下)let move_type = 0//记录动画行为(1:下拉,2:上下，3：左右，0：不动)let transition_type = 0// 左右start//清除盒子动画childbox.style.transition = ''//获取盒子left位置let startleft = childbox.offsetLeft//是否切换滑动let type = {a: false,b: ''}//左右over//上下滑动//滑动的初始化位置let startTop = viewlist[indextype].offsetTop//判断是否切换let top_type_view = {a: false, //是否要切换b: '', //判断向上还是向下}console.log(startTop)//上下over//下拉刷新//清除动画viewlist[indextype].style.transition = '';//记录下拉距离let b_top = 0//下拉overdocument.onmousemove = function (event) {//获取移动时坐标let moveY = event.clientYlet moveX = event.clientX//加是否要判断的开关if (t_l_type) {//判断是左右滑动还是上下if (Math.abs(moveY - startY) > 5) {//停止下次判断t_l_type = false//记录滑动状态move_type = 2}if (Math.abs(moveX - startX) > 5) {//停止下次判断t_l_type = false//记录滑动状态move_type = 1}}//判断滑动代码if (move_type == 2) {//下拉需要两个条件 1 下拉的 2 上没有东西了if (view_index[indextype][0] == 0 && moveY - startY > 0) {console.log('下拉')//改变动画状态transition_type = 1//计算下拉距离b_top = moveY - startY//拉动视图盒子viewlist[indextype].style.top = b_top + 'px'return}//执行上下滑动//下拉的时候拒绝上下滑动if (transition_type != 1) {//改变动画状态transition_type = 2//移动的位置let moveY = event.clientY//计算上下移动的距离let num = moveY - startY//改变拖拽元素的top值viewlist[indextype].style.top = startTop + num + 'px'//判断是否要切换if (num > 70) {top_type_view.a = truetop_type_view.b = '上'} else if (num < -70) {top_type_view.a = truetop_type_view.b = '下'}}} else if (move_type == 1) {// 左右的代码//改变动画状态transition_type = 3//移动的位置let moveX = event.clientX//移动的距离let num = moveX - startX//盒子需要的left值childbox.style.left = startleft + num + 'px'//滑动的方向if (moveX > startX) {if (num > 100) {type.a = truetype.b = '右'}} else if (moveX < startX) {if (num < -100) {type.a = truetype.b = '左'}}// over}}//抬起window.onmouseup = function () {//清除滑动事件document.onmousemove = ''//判断执行动画if (transition_type == 1) {//下拉//加上动画viewlist[indextype].style.transition = 'all .5s';//判断拉动的距离判断是否刷新if (b_top > 70) {//执行动画transition_status = falseviewlist[indextype].style.top = '70px'setTimeout(function () {viewlist[indextype].style.top = '0px'//从第一页开始view_index[indextype][2] = 1autoview(indextype)//还原动画setTimeout(() => {transition_status = true}, 500);}, 2000)} else {viewlist[indextype].style.top = '0px'}} else if (transition_type == 2) {//上下//加上过渡动画viewlist[indextype].style.transition = 'all .5s';//判断执行的动画if (top_type_view.a) {//判断上下切换if (top_type_view.b == '上') {//下标改变view_index[indextype][0]--if (view_index[indextype][0] <= -1) {view_index[indextype][0] = 0}viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'console.log('上')} else if (top_type_view.b == '下') {view_index[indextype][0]++if (view_index[indextype][0] >= view_index[indextype][1] - 2) {//生成新的视频autoview(indextype)}viewlist[indextype].style.top = view_index[indextype][0] * -viewheight + 'px'}} else {//还原现有状态viewlist[indextype].style.top = startTop + 'px'}} else if (transition_type == 3) {//左右//执行判断是否切换if (type.a) {if (type.b === '左') {indextype++if (indextype >= 3) {indextype = 2}} else if (type.b === '右') {indextype--if (indextype <= -1) {indextype = 0}}}//加上过渡childbox.style.transition = 'all 0.5s'//调取切换函数set_nav_active(indextype)}//还原下次判断t_l_type = true//还原下次状态move_type = 0//还原动画状态transition_type = 0}}//随机背景颜色function autocolor() {return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)},${Math.floor(Math.random() * 255)})`}//默认生成视频列表for (let i = 0; i < viewlist.length; i++) {autoview(i)}//生成视频列表function autoview(index) {//获取视频类型let type = viewlist[index].getAttribute('type')//更改视频数量if (view_index[index][2] == 1) {//清除现有内容viewlist[indextype].innerHTML = ''//记录视频数量view_index[index][1] = 10} else {//累加视频数量view_index[index][1] += 10}//index 插入的下标for (let i = 0; i < 10; i++) {//创建domlet div = document.createElement('div')//命名div.className = 'view_child'//内容div.innerHTML = `<div>${type}:${(view_index[index][2] - 1) * 10 + i + 1}</div><hr></hr><div>页码：${view_index[index][2]}</div>`//设置背景颜色div.style.backgroundColor = autocolor()//设置盒子高度div.style.height = viewheight + 'px'//追加viewlist[index].appendChild(div)}//更改下次页码view_index[index][2]++console.log(view_index)}//双击置顶let nav_box = document.querySelector('.nav_box')nav_box.ondblclick = function () {viewlist[indextype].style.transition = 'all .5s'viewlist[indextype].style.top = '0px'view_index[indextype][0] = 0}
</script></html>

最后祝大家端午安康~，记得一件三连！！！！

原生JS实现移动端上下滑动一次一屏（仿抖音）相关推荐

原生JS实现移动端模块的左右滑动切换效果，基于vue、stylus
原生JS实现移动端模块的左右滑动动画效果,基于vue.stylus 大概实现方案: 手指touch屏幕的整个过程,会派发touchstart.touchmove.touchend三个事件,对这三个事件 ...
html移动端选择器插件,原生js实现移动端选择器插件
原生js实现移动端选择器插件前言插件功能只满足我司业务需求,如果希望有更多功能的,可在下方留言,我尽量扩展!如果你有需要或者喜欢的话,可以给我github来个star ? 预览准备首先在页面中 ...
原生JS实现移动端选择器插件
原生js实现移动端选择器插件仓库地址在线预览(记得将浏览器切换到手机模式) 预览准备首先在页面中引入css,js文件每次需要弹出该组件时通过new一个实例来生成,代码如下: var data ...
市面售价2W的仿抖音短视频原生双端APP源码，带技术文档管理后台和数据库
这个短视频系统源码是2w某站购买来的仿抖音视频app,原生双端开发,带技术文档管理后台和数据库.非常适合用来做类似项目的基础开发框架,能节省大量的开发时间和试错成本. 除了直播没有开通,其他功能都是精 ...
html5仿抖音全屏播放,仿抖音视频全屏播放滑动切换
1 前言随着移动技术的快速迭代,数据流量费用的快速下降,视频.直播正成为全民的媒体盛宴,我司必然也不会缺席此次盛宴,这里讲述的是通过h5实现仿抖音视频全屏播放&滑动切换的效果,供我司直播鉴定 ...
基于Uni-APP多端「h5+小程序+App」高仿抖音小视频|直播|聊天实例
uni-ttLive 基于uni-app+uView-ui跨端开发短视频+直播聊天实例. 全新研发的一款多端仿制抖音短视频+直播+聊天项目,基于uniApp+Vue.js+Vuex+Nvue+uVie ...
html5仿抖音切换效果,仿抖音视频滑动效果
更新记录 1.6.2(2020-06-04) 优化css3动画效果 1.6.1(2020-05-23) 1.修复串音 2.新增进度条 3.新增弹幕查看更多 scroll-video uniapp仿抖 ...
整合vite2.0+electron12+vant3.x跨端仿抖音短视频+聊天+直播exe应用
vite2-electron-douyin 基于vite2.x+electron模仿抖音短视频应用实例. 整合了vite2+electron跨端开发技术仿制抖音界面桌面版exe应用软件.基于Vite2 ...
仿抖音写上下滑动切换视频
公司小程序要做个仿抖音上下切换视频的效果,一开始想用swiper,有资料说多了会卡.原因是video标签太多的原因,查看资料有只是用一个video标签的,滑动时切换src即可全部代码 <tem ...

原生JS实现移动端上下滑动一次一屏（仿抖音）

原生JS实现移动端上下滑动一次一屏（仿抖音）相关推荐

最新文章

热门文章