zyronon
6 years ago
3 changed files with 426 additions and 13233 deletions
@ -1,48 +1,48 @@ |
|||||||
{ |
{ |
||||||
"name": "douyin", |
"name": "douyin", |
||||||
"version": "0.1.0", |
"version": "0.1.0", |
||||||
"private": true, |
"private": true, |
||||||
"scripts": { |
"scripts": { |
||||||
"serve": "vue-cli-service serve", |
"serve": "vue-cli-service serve", |
||||||
"build": "vue-cli-service build", |
"build": "vue-cli-service build", |
||||||
"lint": "vue-cli-service lint", |
"lint": "vue-cli-service lint", |
||||||
"push": "git add ./ && git commit -m 'dubug' && git push origin master" |
"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 |
|
||||||
}, |
}, |
||||||
"extends": [ |
"dependencies": { |
||||||
"plugin:vue/essential", |
"vue": "^2.5.17", |
||||||
"eslint:recommended" |
"vue-router": "^3.0.1" |
||||||
], |
}, |
||||||
"rules": {}, |
"devDependencies": { |
||||||
"parserOptions": { |
"@vue/cli-plugin-babel": "^3.0.3", |
||||||
"parser": "babel-eslint" |
"@vue/cli-plugin-eslint": "^3.0.3", |
||||||
} |
"@vue/cli-service": "^3.0.3", |
||||||
}, |
"vue-template-compiler": "^2.5.17", |
||||||
"postcss": { |
"node-sass": "^4.9.3", |
||||||
"plugins": { |
"sass-loader": "^7.1.0", |
||||||
"autoprefixer": {} |
"vue-awesome-swiper": "^3.1.3" |
||||||
} |
}, |
||||||
}, |
"eslintConfig": { |
||||||
"browserslist": [ |
"root": true, |
||||||
"> 1%", |
"env": { |
||||||
"last 2 versions", |
"node": true |
||||||
"not ie <= 8" |
}, |
||||||
] |
"extends": [ |
||||||
|
"plugin:vue/essential", |
||||||
|
"eslint:recommended" |
||||||
|
], |
||||||
|
"rules": {}, |
||||||
|
"parserOptions": { |
||||||
|
"parser": "babel-eslint" |
||||||
|
} |
||||||
|
}, |
||||||
|
"postcss": { |
||||||
|
"plugins": { |
||||||
|
"autoprefixer": {} |
||||||
|
} |
||||||
|
}, |
||||||
|
"browserslist": [ |
||||||
|
"> 1%", |
||||||
|
"last 2 versions", |
||||||
|
"not ie <= 8" |
||||||
|
] |
||||||
} |
} |
||||||
|
|||||||
@ -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