重写首页滑动逻辑
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
90
package.json
90
package.json
@ -1,48 +1,48 @@
|
||||
{
|
||||
"name": "douyin",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"push": "git add ./ && git commit -m 'dubug' && git push origin master"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.3",
|
||||
"@vue/cli-plugin-eslint": "^3.0.3",
|
||||
"@vue/cli-service": "^3.0.3",
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
"node-sass": "^4.9.3",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-awesome-swiper": "^3.1.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
"name": "douyin",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint",
|
||||
"push": "git add ./ && git commit -m 'dubug' && git push origin master"
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
"dependencies": {
|
||||
"vue": "^2.5.17",
|
||||
"vue-router": "^3.0.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/cli-plugin-babel": "^3.0.3",
|
||||
"@vue/cli-plugin-eslint": "^3.0.3",
|
||||
"@vue/cli-service": "^3.0.3",
|
||||
"vue-template-compiler": "^2.5.17",
|
||||
"node-sass": "^4.9.3",
|
||||
"sass-loader": "^7.1.0",
|
||||
"vue-awesome-swiper": "^3.1.3"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"root": true,
|
||||
"env": {
|
||||
"node": true
|
||||
},
|
||||
"extends": [
|
||||
"plugin:vue/essential",
|
||||
"eslint:recommended"
|
||||
],
|
||||
"rules": {},
|
||||
"parserOptions": {
|
||||
"parser": "babel-eslint"
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"plugins": {
|
||||
"autoprefixer": {}
|
||||
}
|
||||
},
|
||||
"browserslist": [
|
||||
"> 1%",
|
||||
"last 2 versions",
|
||||
"not ie <= 8"
|
||||
]
|
||||
}
|
||||
|
||||
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