304 lines
8.9 KiB
Vue
304 lines
8.9 KiB
Vue
<template>
|
|
<div id="home-index">
|
|
<SlideList v-model:active-index="baseActiveIndex">
|
|
<SlideItem>
|
|
<SlideList
|
|
v-model:active-index="activeIndex"
|
|
:showIndicator="true"
|
|
:useHomeLoading="true"
|
|
>
|
|
<SlideItem>
|
|
<SlideList direction="column"
|
|
>
|
|
<SlideItem style="background: tan">
|
|
<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>
|
|
<SlideColumnList
|
|
direction="column"
|
|
ref="slideList"
|
|
v-model:active-index="videoActiveIndex"
|
|
:virtual="true"
|
|
:total="total"
|
|
@slide="slide">
|
|
<SlideItem :style="itemTop" v-for="(item,index) of videos">
|
|
<Video
|
|
:disabled="videoActiveIndex !== addCount + index"
|
|
v-model:video="videos[index]"
|
|
@showComments="isCommenting = !isCommenting"
|
|
@showShare="isSharing = !isSharing"
|
|
@goUserInfo="baseActiveIndex = 1"
|
|
></Video>
|
|
</SlideItem>
|
|
</SlideColumnList>
|
|
</SlideItem>
|
|
</SlideList>
|
|
<Footer v-bind:init-tab="1"/>
|
|
</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>
|
|
<Comment v-model:is-commenting="isCommenting"/>
|
|
<Share v-model:is-sharing="isSharing" ref="share"/>
|
|
</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 mp41 from '../../assets/video/5.mp4'
|
|
import mp42 from '../../assets/video/2.mp4'
|
|
import mp43 from '../../assets/video/3.mp4'
|
|
import mp44 from '../../assets/video/4.mp4'
|
|
import mp45 from '../../assets/video/5.mp4'
|
|
import src1Bg from '../../assets/img/poster/src1-bg.png'
|
|
import Video from "../../components/Video.vue";
|
|
import SlideColumnList from "../../components/slide/SlideColumnList";
|
|
|
|
export default {
|
|
name: "HomeIndex",
|
|
components: {Footer, Comment, Share, Other, Video, SlideColumnList},
|
|
data() {
|
|
return {
|
|
list: [1, 2, 3, 4, 5],
|
|
videos: [
|
|
{
|
|
videoUrl: mp41,
|
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
|
videoPoster: src1Bg,
|
|
isLoved: true,
|
|
loves: 1234,
|
|
comments: 666,
|
|
shared: 999,
|
|
duration: 99
|
|
},
|
|
{
|
|
videoUrl: mp42,
|
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
|
videoPoster: src1Bg,
|
|
isLoved: false,
|
|
loves: 1234,
|
|
comments: 666,
|
|
shared: 999,
|
|
duration: 99
|
|
},
|
|
{
|
|
videoUrl: mp43,
|
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
|
videoPoster: src1Bg,
|
|
isLoved: false,
|
|
loves: 1234,
|
|
comments: 666,
|
|
shared: 999,
|
|
duration: 99
|
|
},
|
|
{
|
|
videoUrl: mp44,
|
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
|
videoPoster: src1Bg,
|
|
isLoved: false,
|
|
loves: 1234,
|
|
comments: 666,
|
|
shared: 999,
|
|
duration: 99
|
|
},
|
|
{
|
|
videoUrl: mp45,
|
|
// videoUrl: 'http://babylife.qiniudn.com/FtRVyPQHHocjVYjeJSrcwDkApTLQ',
|
|
videoPoster: src1Bg,
|
|
isLoved: false,
|
|
loves: 1234,
|
|
comments: 666,
|
|
shared: 999,
|
|
duration: 99
|
|
},
|
|
],
|
|
addCount: 0,
|
|
total: 10,
|
|
isCommenting: false,
|
|
isSharing: false,
|
|
baseActiveIndex: 0,
|
|
activeIndex: 1,
|
|
videoActiveIndex: 0,
|
|
|
|
tabWidth: 30,
|
|
tabIndexRelationActiveIndexLefts: [],
|
|
slideMoveXDistance: 0,
|
|
slideMoveYDistance: 0,
|
|
height: 0,
|
|
width: 0,
|
|
toolbarStyleTransitionDuration: 0,
|
|
loading: false
|
|
}
|
|
},
|
|
computed: {
|
|
itemTop() {
|
|
return {top: this.addCount * 812 + 'px'}
|
|
},
|
|
},
|
|
mounted() {
|
|
this.height = document.body.clientHeight
|
|
this.width = document.body.clientWidth
|
|
},
|
|
methods: {
|
|
getData() {
|
|
this.loading = true
|
|
setTimeout(() => {
|
|
this.loading = false
|
|
}, 1500)
|
|
},
|
|
slide(e) {
|
|
let {currentSlideItemIndex, isDrawDown} = e
|
|
if (isDrawDown) {
|
|
if (this.list.length - 3 < currentSlideItemIndex && currentSlideItemIndex + 2 < this.total) {
|
|
this.list.push(currentSlideItemIndex + 3)
|
|
setTimeout(() => {
|
|
this.addCount += 1
|
|
this.list.shift()
|
|
}, 300)
|
|
this.$refs.slideList.checkChildren()
|
|
}
|
|
} else {
|
|
if (currentSlideItemIndex > 1 && currentSlideItemIndex + 3 < this.total) {
|
|
this.list.pop()
|
|
setTimeout(() => {
|
|
this.addCount -= 1
|
|
this.list.unshift(currentSlideItemIndex - 1)
|
|
}, 300)
|
|
this.$refs.slideList.checkChildren()
|
|
}
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
|
|
},
|
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
|
#home-index {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
</style> |