JS實現(xiàn)移動端上下滑動一次一屏
更新時間：2021年06月16日 09:10:25 作者：禿頭星人~
這篇文章主要為大家詳細介紹了JS實現(xiàn)移動端上下滑動一次一屏，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)移動端上下滑動一次一屏的具體代碼，供大家參考，具體內(nèi)容如下
功能如下:
- 頭部： 附近、關(guān)注、推薦選項卡的切換
- 左右滑動功能、頭部選項卡跟隨動畫
- 上下滑動劃動一屏，滑動超過頭部刷新
- 雙擊選項卡回到頂部
上代碼：
<!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="關(guān)注">
</div>
</div>
<div class="child3">
<div class="listview" type="推薦">
</div>
</div>
</div>
<div class="nav_box">
<div>附近</div>
<div>關(guān)注</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,關(guān)注，2推薦）
let indextype = 2
//視頻播放的索引(0:附近,1:關(guān)注,2:推薦)[下標,視頻的數(shù)量,頁碼]
let view_index = {
0: [0, 0, 1],
1: [0, 0, 1],
2: [0, 0, 1]
}
//初始化導航
set_nav_active(indextype)
//導航選中狀態(tài)
function set_nav_active(index) {
//清除選中狀態(tài)
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'
//改變點擊導航狀態(tài)
indextype = i
set_nav_active(indextype)
}
}
//左右滑動
let box = document.querySelector('#box')
//動畫是否結(jié)束的狀態(tài)
let transition_status = true
//按下
box.onmousedown = function (event) {
//判斷是否可以執(zhí)行動畫
if (!transition_status) {
return
}
//獲取坐標值
let startY = event.clientY
let startX = event.clientX
//是否要進判斷
let t_l_type = true
//獲取上下還是左右滑動的狀態(tài)(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
//下拉over
document.onmousemove = function (event) {
//獲取移動時坐標
let moveY = event.clientY
let moveX = event.clientX
//加是否要判斷的開關(guān)
if (t_l_type) {
//判斷是左右滑動還是上下
if (Math.abs(moveY - startY) > 5) {
//停止下次判斷
t_l_type = false
//記錄滑動狀態(tài)
move_type = 2
}
if (Math.abs(moveX - startX) > 5) {
//停止下次判斷
t_l_type = false
//記錄滑動狀態(tài)
move_type = 1
}
}
//判斷滑動代碼
if (move_type == 2) {
//下拉需要兩個條件 1 下拉的 2 上沒有東西了
if (view_index[indextype][0] == 0 && moveY - startY > 0) {
console.log('下拉')
//改變動畫狀態(tài)
transition_type = 1
//計算下拉距離
b_top = moveY - startY
//拉動視圖盒子
viewlist[indextype].style.top = b_top + 'px'
return
}
//執(zhí)行上下滑動
//下拉的時候拒絕上下滑動
if (transition_type != 1) {
//改變動畫狀態(tài)
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 = true
top_type_view.b = '上'
} else if (num < -70) {
top_type_view.a = true
top_type_view.b = '下'
}
}
} else if (move_type == 1) {
// 左右的代碼
//改變動畫狀態(tài)
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 = true
type.b = '右'
}
} else if (moveX < startX) {
if (num < -100) {
type.a = true
type.b = '左'
}
}
// over
}
}
//抬起
window.onmouseup = function () {
//清除滑動事件
document.onmousemove = ''
//判斷執(zhí)行動畫
if (transition_type == 1) {
//下拉
//加上動畫
viewlist[indextype].style.transition = 'all .5s';
//判斷拉動的距離判斷是否刷新
if (b_top > 70) {
//執(zhí)行動畫
transition_status = false
viewlist[indextype].style.top = '70px'
setTimeout(function () {
viewlist[indextype].style.top = '0px'
//從第一頁開始
view_index[indextype][2] = 1
autoview(indextype)
//還原動畫
setTimeout(() => {
transition_status = true
}, 500);
}, 2000)
} else {
viewlist[indextype].style.top = '0px'
}
} else if (transition_type == 2) {
//上下
//加上過渡動畫
viewlist[indextype].style.transition = 'all .5s';
//判斷執(zhí)行的動畫
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 {
//還原現(xiàn)有狀態(tài)
viewlist[indextype].style.top = startTop + 'px'
}
} else if (transition_type == 3) {
//左右
//執(zhí)行判斷是否切換
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'
//調(diào)取切換函數(shù)
set_nav_active(indextype)
}
//還原下次判斷
t_l_type = true
//還原下次狀態(tài)
move_type = 0
//還原動畫狀態(tài)
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')
//更改視頻數(shù)量
if (view_index[index][2] == 1) {
//清除現(xiàn)有內(nèi)容
viewlist[indextype].innerHTML = ''
//記錄視頻數(shù)量
view_index[index][1] = 10
} else {
//累加視頻數(shù)量
view_index[index][1] += 10
}
//index 插入的下標
for (let i = 0; i < 10; i++) {
//創(chuàng)建dom
let div = document.createElement('div')
//命名
div.className = 'view_child'
//內(nèi)容
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>
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
小程序websocket心跳庫(websocket-heartbeat-miniprogram)
這篇文章主要介紹了小程序websocket心跳庫(websocket-heartbeat-miniprogram)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-02-02
這篇文章主要介紹了微信小程序點擊頂部導航欄切換樣式代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-11-11
多瀏覽器兼容的動態(tài)加載 JavaScript 與 CSS
Omar AL Zabir這位MVP總是喜歡搞些稀奇古怪同時又很實用的小東西，并且還十分值得參考。最近他就做了一個叫做ensure的小工具用于動態(tài)加載JavaScript、CSS與HTML，而且IE、Firefox、Opera、Safari都支持了，那么我們就來看看ensure是如何做到動態(tài)加載JavaScript與CSS的。2008-09-09
使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室
本文主要給大家詳細介紹Angular和Nodejs、socket.io的使用，以及如何使用Angular和Nodejs、socket.io搭建聊天室及多人聊天室，需要的朋友可以來參考下2015-08-08
hasFocus是document的特有方法．用來判斷當前網(wǎng)頁是否獲得焦點．2010-06-06
本文給大家分享的是一個JavaScript兼容火狐瀏覽器與IE瀏覽器的一個小技巧，非常的簡單實用，有需要的小伙伴可以參考下2016-08-08
這篇文章主要介紹了MUI 上拉刷新/下拉加載功能實例代碼，包括一些個人心得，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-04-04
在我們進行前端開發(fā)時，針對項目優(yōu)化，常會提到一條：針對較小圖片，合理使用Base64字符串替換內(nèi)嵌，可以減少頁面http請求。本文整理了一些Base64編碼字符串的相關(guān)知識，感興趣的可以了解一下2023-02-02
(function(){})()的用法與優(yōu)點...2007-03-03
這篇文章主要介紹了JS實現(xiàn)超精簡響應鼠標顯示二級菜單代碼,可實現(xiàn)針對鼠標事件的響應動態(tài)修改頁面元素屬性的功能,非常簡單實用,需要的朋友可以參考下2015-09-09