重写首页滑动逻辑
This commit is contained in:
zyronon
parent
e2f04bf88b
commit
7dceb6305e
13188
package-lock.json
generated
13188
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
381
src/tools/抖音滑动效果v2.html
Normal file
381
src/tools/抖音滑动效果v2.html
Normal file
@ -0,0 +1,381 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="cn">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="screen-orientation" content="portrait"/>
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="format-detection" content="telephone=no">
|
||||||
|
<meta name="full-screen" content="yes">
|
||||||
|
<meta name="x5-fullscreen" content="true">
|
||||||
|
<title>Document</title>
|
||||||
|
<!-- <script src="https://lib.baomitu.com/jquery/3.4.1/jquery.min.js"></script>-->
|
||||||
|
<script src="https://lib.baomitu.com/zepto/1.2.0/zepto.js"></script>
|
||||||
|
<!-- <script src="event.js"></script>-->
|
||||||
|
<script src="http://www.ttentau.top/touch.js"></script>
|
||||||
|
<script src="http://www.ttentau.top/fx.js"></script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: #2e3244;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
/*overflow: auto;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
position: relative;
|
||||||
|
/*left: -100%;*/
|
||||||
|
/*top: -350px;*/
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/*height: 812px;*/
|
||||||
|
/*overflow-y:hidden ;*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
/*flex-shrink: 0;*/
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-container {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-list {
|
||||||
|
position: absolute;
|
||||||
|
/*top: -100%;*/
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-item {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-tool {
|
||||||
|
height: 300px;
|
||||||
|
width: 50px;
|
||||||
|
background: #ccc;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 100px;
|
||||||
|
right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 30px;
|
||||||
|
background: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-container {
|
||||||
|
top: 0;
|
||||||
|
left: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-videos {
|
||||||
|
height: 12000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.console {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 500px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div class="container">
|
||||||
|
<div class="wrapper">
|
||||||
|
<div class="left-container swiper-item">
|
||||||
|
<div class="content-list">
|
||||||
|
<div class="content-item">11111
|
||||||
|
<div class="item-tool"></div>
|
||||||
|
</div>
|
||||||
|
<div class="content-item">22222
|
||||||
|
<div class="item-tool"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right-container swiper-item ">
|
||||||
|
<div class="user-bg">user-bg</div>
|
||||||
|
<div class="user-videos">user-videos
|
||||||
|
<p>user-videos</p>
|
||||||
|
<p>user-videos</p>
|
||||||
|
<p>user-videos</p>
|
||||||
|
<p>user-videos</p>
|
||||||
|
<p>user-videos</p>
|
||||||
|
<p>user-videos</p>
|
||||||
|
<p>user-videos</p>
|
||||||
|
<p>user-videos</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="console">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
// let
|
||||||
|
let consoleEl = $('.console')
|
||||||
|
let swiperItem = $('.swiper-item')
|
||||||
|
let contentItem = $('.content-item')
|
||||||
|
let wrapper = $('.wrapper')
|
||||||
|
let contentList = $('.content-list')
|
||||||
|
|
||||||
|
let height = $('body').height()
|
||||||
|
let width = $('body').width()
|
||||||
|
|
||||||
|
let startLocationY = 0
|
||||||
|
let startLocationX = 0
|
||||||
|
|
||||||
|
let lastLocationY = 0
|
||||||
|
let lastLocationX = 0
|
||||||
|
|
||||||
|
let moveXDistance = 0
|
||||||
|
let moveYDistance = 0
|
||||||
|
|
||||||
|
let judgeValue = 30
|
||||||
|
|
||||||
|
let startTime
|
||||||
|
let currentIndex
|
||||||
|
let currentSwiperItemIndex
|
||||||
|
let isDrawDown
|
||||||
|
let isDrawRight
|
||||||
|
|
||||||
|
let isCanDownWiping = false
|
||||||
|
let isCanRightWiping = false
|
||||||
|
let isNeedCheck = true
|
||||||
|
// let isCanDownWiping = true
|
||||||
|
// let isCanRightWiping = true
|
||||||
|
// let isNeedCheck = false
|
||||||
|
|
||||||
|
|
||||||
|
function checkDirection() {
|
||||||
|
consoleEl.append('<p>' + 'isNeedCheck:' + isNeedCheck + '</p>')
|
||||||
|
|
||||||
|
|
||||||
|
if (!isNeedCheck) {
|
||||||
|
// console.log('不需要检测了')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
consoleEl.append('<p>' + 'moveXDistance:' + moveXDistance + '</p>')
|
||||||
|
consoleEl.append('<p>' + 'moveYDistance:' + moveYDistance + '</p>')
|
||||||
|
|
||||||
|
if (Math.abs(moveXDistance) > judgeValue || Math.abs(moveYDistance) > judgeValue) {
|
||||||
|
//X 除以 Y
|
||||||
|
let angle = (Math.abs(moveXDistance) * 10) / (Math.abs(moveYDistance) * 10)
|
||||||
|
if (angle > 0.7 && angle < 1.3) {
|
||||||
|
isNeedCheck = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
consoleEl.append('<p>' + 'angle:' + angle + '</p>')
|
||||||
|
|
||||||
|
// console.log('x------------', moveXDistance)
|
||||||
|
// console.log('y------------', moveYDistance)
|
||||||
|
// console.log('角度------------', angle)
|
||||||
|
|
||||||
|
if (angle < 0.6) {
|
||||||
|
//上下划
|
||||||
|
isCanDownWiping = true
|
||||||
|
isCanRightWiping = false
|
||||||
|
isNeedCheck = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (angle > 5) {
|
||||||
|
//左右划
|
||||||
|
isCanDownWiping = false
|
||||||
|
isCanRightWiping = true
|
||||||
|
isNeedCheck = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetConfig() {
|
||||||
|
isCanDownWiping = false
|
||||||
|
isCanRightWiping = false
|
||||||
|
isNeedCheck = true
|
||||||
|
moveXDistance = 0
|
||||||
|
moveYDistance = 0
|
||||||
|
// isCanDownWiping = true
|
||||||
|
// isCanRightWiping = true
|
||||||
|
// isNeedCheck = false
|
||||||
|
}
|
||||||
|
|
||||||
|
swiperItem
|
||||||
|
.on('touchstart', function (e) {
|
||||||
|
consoleEl.empty()
|
||||||
|
consoleEl.append('<p>swiperItem touchstart</p>')
|
||||||
|
currentSwiperItemIndex = $(this).index()
|
||||||
|
startLocationX = e.touches[0].pageX
|
||||||
|
startTime = Date.now()
|
||||||
|
})
|
||||||
|
.on('touchmove', function (e) {
|
||||||
|
consoleEl.append('<p>' + 'si move isCanRightWiping:' + isCanRightWiping + '</p>')
|
||||||
|
|
||||||
|
lastLocationX = e.touches[0].pageX
|
||||||
|
moveXDistance = lastLocationX - startLocationX
|
||||||
|
isDrawRight = moveXDistance < 0
|
||||||
|
|
||||||
|
// console.log(moveXDistance)
|
||||||
|
checkDirection()
|
||||||
|
if (isCanRightWiping) {
|
||||||
|
if (isDrawRight) {
|
||||||
|
wrapper.css({left: -(currentSwiperItemIndex + 0) * width + moveXDistance + judgeValue})
|
||||||
|
} else {
|
||||||
|
wrapper.css({left: -(currentSwiperItemIndex + 0) * width + moveXDistance - judgeValue})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on('touchend', function (e) {
|
||||||
|
consoleEl.append('<p>swiperItem touchend</p>')
|
||||||
|
|
||||||
|
if (!isCanRightWiping) {
|
||||||
|
// resetConfig()
|
||||||
|
isNeedCheck = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// console.log('contentList-touchend', e)
|
||||||
|
let endTime = Date.now()
|
||||||
|
let gapTime = endTime - startTime
|
||||||
|
|
||||||
|
// 如果
|
||||||
|
if (Math.abs(moveXDistance) < 20) {
|
||||||
|
gapTime = 1000
|
||||||
|
}
|
||||||
|
if (Math.abs(moveXDistance) > (width / 3)) {
|
||||||
|
gapTime = 100
|
||||||
|
}
|
||||||
|
// console.log('是否向左划',isDrawRight)
|
||||||
|
if (gapTime < 150) {
|
||||||
|
// console.log('小于500', currentIndex)
|
||||||
|
if (isDrawRight) {
|
||||||
|
// console.log('往下划');
|
||||||
|
if (currentSwiperItemIndex === swiperItem.length - 1) {
|
||||||
|
return wrapper.animate({left: -(swiperItem.length - 1) * width}, 200)
|
||||||
|
}
|
||||||
|
wrapper.animate({left: -(currentSwiperItemIndex + 1) * width}, 200)
|
||||||
|
} else {
|
||||||
|
// console.log('往上划');
|
||||||
|
if (currentSwiperItemIndex === 0) {
|
||||||
|
return wrapper.animate({left: 0}, 200)
|
||||||
|
}
|
||||||
|
wrapper.animate({left: -(currentSwiperItemIndex - 1) * width}, 200)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
wrapper.animate({left: -(currentSwiperItemIndex) * width}, 200, 'linear')
|
||||||
|
}
|
||||||
|
|
||||||
|
resetConfig()
|
||||||
|
})
|
||||||
|
contentList
|
||||||
|
.on('touchstart', '.content-item', function (e) {
|
||||||
|
consoleEl.empty()
|
||||||
|
consoleEl.append('<p>contentItem touchstart</p>')
|
||||||
|
currentIndex = $(this).index()
|
||||||
|
startLocationY = e.touches[0].pageY
|
||||||
|
startLocationX = e.touches[0].pageX
|
||||||
|
startTime = Date.now()
|
||||||
|
})
|
||||||
|
.on('touchmove', function (e) {
|
||||||
|
consoleEl.append('<p>' + 'ci move isCanDownWiping:' + isCanDownWiping + '</p>')
|
||||||
|
|
||||||
|
lastLocationY = e.touches[0].pageY
|
||||||
|
|
||||||
|
moveYDistance = lastLocationY - startLocationY
|
||||||
|
isDrawDown = moveYDistance < 0
|
||||||
|
|
||||||
|
checkDirection()
|
||||||
|
if (isCanDownWiping) {
|
||||||
|
if (isDrawDown) {
|
||||||
|
contentList.css({top: -(currentIndex + 0) * height + moveYDistance + judgeValue})
|
||||||
|
} else {
|
||||||
|
contentList.css({top: -(currentIndex + 0) * height + moveYDistance - judgeValue})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.on('touchend', function (e) {
|
||||||
|
consoleEl.append('<p>contentItem touchend</p>')
|
||||||
|
|
||||||
|
if (!isCanDownWiping) {
|
||||||
|
isNeedCheck = true
|
||||||
|
return
|
||||||
|
}
|
||||||
|
// console.log('contentList-touchend', e)
|
||||||
|
let endTime = Date.now()
|
||||||
|
moveYDistance = lastLocationY - startLocationY
|
||||||
|
let gapTime = endTime - startTime
|
||||||
|
|
||||||
|
// 如果
|
||||||
|
if (Math.abs(moveYDistance) < 20) {
|
||||||
|
gapTime = 1000
|
||||||
|
}
|
||||||
|
if (Math.abs(moveYDistance) > (width / 3)) {
|
||||||
|
gapTime = 100
|
||||||
|
}
|
||||||
|
|
||||||
|
if (gapTime < 150) {
|
||||||
|
// console.log('小于500', currentIndex)
|
||||||
|
if (isDrawDown) {
|
||||||
|
console.log('往下划')
|
||||||
|
if ($('.content-item').length < currentIndex + 3) {
|
||||||
|
loadNewVideo()
|
||||||
|
}
|
||||||
|
// if (currentIndex === contentItem.length - 1) {
|
||||||
|
// return contentList.animate({top: -(contentItem.length - 1) * height}, 200)
|
||||||
|
// }
|
||||||
|
contentList.animate({top: -(currentIndex + 1) * height}, 200)
|
||||||
|
} else {
|
||||||
|
console.log('往上划')
|
||||||
|
if (currentIndex === 0) {
|
||||||
|
return contentList.animate({top: 0}, 200)
|
||||||
|
}
|
||||||
|
contentList.animate({top: -(currentIndex - 1) * height}, 200)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
contentList.animate({top: -(currentIndex) * height}, 200, 'linear')
|
||||||
|
}
|
||||||
|
resetConfig()
|
||||||
|
})
|
||||||
|
|
||||||
|
function loadNewVideo() {
|
||||||
|
console.log('加载新的视频到末尾')
|
||||||
|
let html = ` <div class="content-item">${currentIndex}
|
||||||
|
<div class="item-tool"></div>
|
||||||
|
</div>`
|
||||||
|
contentList.append(html)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user