zyronon
4 years ago
7 changed files with 19 additions and 632 deletions
@ -1,595 +0,0 @@
@@ -1,595 +0,0 @@
|
||||
<template> |
||||
<div id="home-index"> |
||||
<SlideList key1="父" style="width: 100vw;"> |
||||
<SlideItem style="font-size: 40px;"> |
||||
<SlideList key1="父" style="width: 100vw;"> |
||||
<SlideItem style="font-size: 40px;overflow:auto;"> |
||||
<div> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
<p>同城页</p> |
||||
</div> |
||||
|
||||
</SlideItem> |
||||
<SlideItem style="font-size: 40px"> |
||||
<SlideList key1="子" direction="column"> |
||||
<SlideItem style="background: white"> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: red;"> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: yellow"> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
</SlideItem> |
||||
</SlideList> |
||||
</SlideItem> |
||||
<SlideItem style="font-size: 40px"> |
||||
<SlideList key1="子" direction="column" @slide="slide"> |
||||
<SlideItem style="background: white"> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
<p>111111111111</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: red;"> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
<p>222222222222</p> |
||||
</SlideItem> |
||||
<SlideItem style="background: yellow"> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
<p>3333333333333</p> |
||||
</SlideItem> |
||||
</SlideList> |
||||
</SlideItem> |
||||
</SlideList> |
||||
</SlideItem> |
||||
<SlideItem style="font-size: 40px;overflow:auto;"> |
||||
<div> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
<p>详情页</p> |
||||
</div> |
||||
</SlideItem> |
||||
</SlideList> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Comment from '../../components/Comment.vue' |
||||
import Other from '../../components/Other.vue' |
||||
import Share from '../../components/Share.vue' |
||||
import Footer from "../../components/Footer.vue" |
||||
import mp1 from '../../assets/video/1.mp4' |
||||
import src1Bg from '../../assets/img/poster/src1-bg.png' |
||||
import SlideItem from './SlideItem.vue' |
||||
import SlideList from './SlideList.vue' |
||||
|
||||
export default { |
||||
name: "HomeIndex", |
||||
components: {Footer, Comment, Share, Other, SlideList, SlideItem}, |
||||
data() { |
||||
return { |
||||
data: [ |
||||
{ |
||||
videoUrl: mp1, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
}, |
||||
{ |
||||
videoUrl: mp1, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
}, |
||||
{ |
||||
videoUrl: mp1, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
}, |
||||
], |
||||
height: 0, |
||||
width: 0, |
||||
startLocationY: 0, |
||||
startLocationX: 0, |
||||
|
||||
lastLocationY: 0, |
||||
lastLocationX: 0, |
||||
|
||||
moveXDistance: 0, |
||||
moveYDistance: 0, |
||||
|
||||
judgeValue: 10, |
||||
|
||||
startTime: 0, |
||||
currentIndex: 0, |
||||
currentSwiperItemIndex: 0, |
||||
isDrawDown: false, |
||||
isDrawRight: false, |
||||
|
||||
isCanDownWiping: false, |
||||
isCanRightWiping: false, |
||||
isNeedCheck: true, |
||||
|
||||
isPlaying: true, |
||||
isCommenting: false, |
||||
isSharing: false, |
||||
|
||||
wrapperLeft: 0, |
||||
contentListTop: 0, |
||||
|
||||
commentHeight: 0, |
||||
shareHeight: 0, |
||||
} |
||||
}, |
||||
mounted() { |
||||
// this.height = document.body.clientHeight |
||||
// this.width = document.body.clientWidth |
||||
}, |
||||
methods: { |
||||
slide(){ |
||||
console.log('slide') |
||||
}, |
||||
goMusic() { |
||||
this.$router.push('/music') |
||||
}, |
||||
checkDirection() { |
||||
if (!this.isNeedCheck) { |
||||
return |
||||
} |
||||
if (Math.abs(this.moveXDistance) > this.judgeValue || Math.abs(this.moveYDistance) > this.judgeValue) { |
||||
//X 除以 Y |
||||
let angle = (Math.abs(this.moveXDistance) * 10) / (Math.abs(this.moveYDistance) * 10) |
||||
if (angle > 0.7 && angle < 1.3) { |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
|
||||
// console.log('x------------', moveXDistance) |
||||
// console.log('y------------', lastMoveYDistance) |
||||
// console.log('角度------------', angle) |
||||
|
||||
if (angle < 0.6) { |
||||
//上下划 |
||||
this.isCanDownWiping = true |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
if (angle > 5) { |
||||
//左右划 |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = true |
||||
this.isNeedCheck = false |
||||
} |
||||
} |
||||
}, |
||||
resetConfig() { |
||||
this.isCanDownWiping = false |
||||
this.isCanRightWiping = false |
||||
this.isNeedCheck = true |
||||
this.moveXDistance = 0 |
||||
this.moveYDistance = 0 |
||||
}, |
||||
wrapperTouchstart(e) { |
||||
if (this.isSharing || this.isCommenting) { |
||||
// this.isNeedCheck = this.isCommenting = this.isSharing = false |
||||
this.isNeedCheck = false |
||||
return |
||||
} |
||||
|
||||
this.startLocationX = e.touches[0].pageX |
||||
this.startTime = Date.now() |
||||
}, |
||||
wrapperTouchmove(e) { |
||||
this.lastLocationX = e.touches[0].pageX |
||||
this.moveXDistance = this.lastLocationX - this.startLocationX |
||||
this.isDrawRight = this.moveXDistance < 0 |
||||
this.checkDirection() |
||||
if (this.isCanRightWiping) { |
||||
if (this.isDrawRight) { |
||||
this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance + this.judgeValue + 'px' |
||||
} else { |
||||
this.wrapperLeft = -this.currentSwiperItemIndex * this.width + this.moveXDistance - this.judgeValue + 'px' |
||||
} |
||||
} |
||||
}, |
||||
wrapperTouchend(e) { |
||||
if (!this.isCanRightWiping) { |
||||
this.isNeedCheck = true |
||||
return |
||||
} |
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
|
||||
if (Math.abs(this.moveXDistance) < 20) { |
||||
gapTime = 1000 |
||||
} |
||||
if (Math.abs(this.moveXDistance) > (this.width / 3)) { |
||||
gapTime = 100 |
||||
} |
||||
if (gapTime < 150) { |
||||
if (this.isDrawRight) { |
||||
// console.log('往左划'); |
||||
if (this.currentSwiperItemIndex === 2 - 1) { |
||||
return this.wrapperLeft = -this.width + 'px' |
||||
} |
||||
this.wrapperLeft = -(this.currentSwiperItemIndex + 1) * this.width + 'px' |
||||
this.currentSwiperItemIndex += 1 |
||||
} else { |
||||
// console.log('往右划'); |
||||
if (this.currentSwiperItemIndex === 0) { |
||||
return this.wrapperLeft = 0 + 'px' |
||||
} |
||||
this.wrapperLeft = -(this.currentSwiperItemIndex - 1) * this.width + 'px' |
||||
this.currentSwiperItemIndex -= 1 |
||||
} |
||||
} else { |
||||
this.wrapperLeft = -(this.currentSwiperItemIndex) * this.width + 'px' |
||||
} |
||||
|
||||
//暂停播放视频 |
||||
let videos = this.$refs.video |
||||
if (this.currentSwiperItemIndex === 0) { |
||||
videos[this.currentIndex].play() |
||||
} else { |
||||
videos[this.currentIndex].pause() |
||||
} |
||||
|
||||
this.resetConfig() |
||||
}, |
||||
contentItemTouchstart(e, index) { |
||||
// this.currentIndex = index |
||||
this.startLocationY = e.touches[0].pageY |
||||
this.startTime = Date.now() |
||||
}, |
||||
contentItemTouchmove(e) { |
||||
this.lastLocationY = e.touches[0].pageY |
||||
|
||||
this.moveYDistance = this.lastLocationY - this.startLocationY |
||||
this.isDrawDown = this.moveYDistance < 0 |
||||
|
||||
this.checkDirection() |
||||
if (this.isCanDownWiping) { |
||||
if (this.isDrawDown) { |
||||
this.contentListTop = -this.currentIndex * this.height + this.moveYDistance + this.judgeValue + 'px' |
||||
// contentList.css({top: -(currentIndex + 0) * height + lastMoveYDistance + judgeValue}) |
||||
} else { |
||||
this.contentListTop = -this.currentIndex * this.height + this.moveYDistance - this.judgeValue + 'px' |
||||
// contentList.css({top: -(currentIndex + 0) * height + lastMoveYDistance - judgeValue}) |
||||
} |
||||
} |
||||
}, |
||||
contentItemTouchend(e, index) { |
||||
this.currentIndex = index |
||||
|
||||
if (!this.isCanDownWiping) { |
||||
this.isNeedCheck = true |
||||
return |
||||
} |
||||
let endTime = Date.now() |
||||
let gapTime = endTime - this.startTime |
||||
|
||||
// 如果 |
||||
if (Math.abs(this.moveYDistance) < 20) { |
||||
gapTime = 1000 |
||||
} |
||||
if (Math.abs(this.moveYDistance) > (this.width / 3)) { |
||||
gapTime = 100 |
||||
} |
||||
if (gapTime < 150) { |
||||
if (this.isDrawDown) { |
||||
console.log('往下划') |
||||
if (this.data.length < this.currentIndex + 4) { |
||||
this.loadNewVideo() |
||||
} |
||||
this.contentListTop = -(this.currentIndex + 1) * this.height + 'px' |
||||
this.currentIndex += 1 |
||||
} else { |
||||
console.log('往上划') |
||||
if (this.currentIndex === 0) { |
||||
return this.contentListTop = 0 |
||||
} |
||||
this.contentListTop = -(this.currentIndex - 1) * this.height + 'px' |
||||
this.currentIndex -= 1 |
||||
} |
||||
this.swipingVideo() |
||||
} else { |
||||
this.contentListTop = -this.currentIndex * this.height + 'px' |
||||
} |
||||
|
||||
this.resetConfig() |
||||
}, |
||||
//加载新的视频 |
||||
loadNewVideo() { |
||||
this.data.push({ |
||||
videoUrl: mp1, |
||||
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ', |
||||
videoPoster: src1Bg, |
||||
isLoved: false, |
||||
loves: 1234, |
||||
comments: 666, |
||||
shared: 999 |
||||
},) |
||||
}, |
||||
|
||||
//划动到下一个视频 |
||||
swipingVideo() { |
||||
let videos = this.$refs.video |
||||
if (this.currentIndex) { |
||||
videos[this.currentIndex - 1].pause() |
||||
} |
||||
videos[this.currentIndex].play() |
||||
videos[this.currentIndex].muted = false |
||||
videos[this.currentIndex + 1].pause() |
||||
|
||||
|
||||
this.isCommenting = false |
||||
this.isSharing = false |
||||
this.isPlaying = true |
||||
}, |
||||
//切换视频状态 |
||||
togglePlayVideo(e) { |
||||
if (this.isSharing) { |
||||
this.isSharing = false |
||||
return |
||||
} |
||||
if (this.isCommenting) { |
||||
this.isCommenting = false |
||||
return |
||||
} |
||||
let el = e.target |
||||
let video = '' |
||||
if (el.nodeName == 'IMG') { |
||||
video = el.parentNode.previousSibling |
||||
} else { |
||||
video = el.previousSibling |
||||
} |
||||
if (video.paused) { |
||||
video.play() |
||||
} else { |
||||
video.pause() |
||||
} |
||||
this.isPlaying = !video.paused |
||||
}, |
||||
//展示评论 |
||||
showComment() { |
||||
this.isCommenting = !this.isCommenting |
||||
}, |
||||
showShare() { |
||||
this.isSharing = !this.isSharing |
||||
}, |
||||
loved(e, index) { |
||||
this.data[index].isLoved = !this.data[index].isLoved |
||||
}, |
||||
//前往用户中心 |
||||
goUserInfo(item) { |
||||
this.wrapperLeft = '-100%' |
||||
}, |
||||
//返回视频列表 |
||||
backVideoList() { |
||||
this.wrapperLeft = '0' |
||||
} |
||||
}, |
||||
created() { |
||||
|
||||
}, |
||||
|
||||
} |
||||
</script> |
||||
<style scoped lang="less"> |
||||
#home-index { |
||||
height: 100%; |
||||
width: 100%; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue