當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2024/3/26 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了原生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
仿抖音

上一篇： windows player![转载]C
下一篇： gradle idea java ssm