pimhwang
/
douyin
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

重写首页滑动逻辑

pull/19/head
zyronon 6 years ago
parent
e2f04bf88b
commit
7dceb6305e
3 changed files with 426 additions and 13233 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 13188
      package-lock.json
  2. 381
      src/tools/抖音滑动效果v2.html

13188
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

381
src/tools/抖音滑动效果v2.html
Unescape View File

@ -0,0 +1,381 @@ @@ -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>
Write Preview
Loading…
Cancel
Save