关于个人项目（臻美MV[模仿抖音App]）滑动切换视频的分析（前端视角）
最编程
2024-03-16 13:45:50
...
<template>
<div class="box">
<v-carousel :cycle="false" :show-arrows="false" hide-delimiters @change="f(index1)" v-model="index1" class="view" height="100vh">
<v-carousel-item v-for="(item,index) in list" :key="index" class="item" @touchstart="cl">
<div class="inner">
<video :src="url" autoplay="autoplay" v-if="playIndex==index"></video>
<div class="foot">
<div class="in">
<p class="user">@ {{item.artistName}}</p>
<p class="name">{{item.name}}</p>
</div>
<div class="pl">
<mu-icon value="speaker_notes" @click="openBotttomSheet" color="white" size="32"></mu-icon>
</div>
</div>
</div>
</v-carousel-item>
</v-carousel>
<mu-bottom-sheet :open.sync="open" class="sheet">
<mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
<div v-for="(item,index) in plist" :key='index' class="ovf pll">
<div class="pl-l"><img :src="item.user.avatarUrl" alt=""></div>
<div class="pl-r">
<div class="name1">{{item.user.nickname}}</div>
<div class="con">{{item.content}}</div>
</div>
</div>
</mu-load-more>
</mu-bottom-sheet>
</div>
</template>
<script>import {mapGetters} from 'vuex'
export default {
name: 'mv',
data () {
return {
name: '',
user: '',
index1: '',
url: '',
list: [],
num: 1,
playIndex: null,
open: false,
idd: '',
plist: '',
num1: 0,
refreshing: false,
loading: false
}
},
methods: {
//下滑重新加载更多评论
refresh () {
this.refreshing = true
this.$refs.container.scrollTop = 0
setTimeout(() => {
this.refreshing = false
this.$axios.get(['/comment/mv?id=' + this.idd]) //这里的url我隐藏了。谢谢理解
.then((response) => {
// success
console.log(response.data.comments)
this.plist = response.data.comments
})
.catch((error) => {
// error
console.log(error)
})
}, 2000)
},
//下滑加载更多评论
load () {
this.loading = true
setTimeout(() => {
this.loading = false
this.num1 += 10
this.$axios.get(['/comment/mv?id=' + this.idd + '&limit=' + this.num1]) //这里的url我隐藏了。谢谢理解
.then((response) => {
// success
console.log(response.data.comments)
this.plist = response.data.comments
})
.catch((error) => {
// error
console.log(error)
})
}, 2000)
},
//右滑切换视频
f (index) {
console.log(index)
let id = this.list[index].id
this.idd = id
this.$axios.get(['/mv/url?id=' + id])//这里的url我隐藏了。谢谢理解
.then((response) => {
// success
console.log(response.data.data.url)
this.url = response.data.data.url
this.playIndex = index
})
.catch((error) => {
// error
console.log(error)
})
},
//关闭评论
closeBottomSheet () {
this.open = false
},
//打开评论
openBotttomSheet () {
this.open = true
console.log(this.idd)
this.$axios.get(['/comment/mv?id=' + this.idd])//这里的url我隐藏了。谢谢理解
.then((response) => {
// success
console.log(response.data.comments)
this.plist = response.data.comments
})
.catch((error) => {
// error
console.log(error)
})
},
//数据自动增加点击增加
cl () {
this.num++
this.$axios.get(['/top/mv?limit=' + this.num])//这里的url我隐藏了。谢谢理解
.then((response) => {
// success
console.log(response.data.data)
this.list = response.data.data
})
.catch((error) => {
// error
console.log(error)
})
}
},
computed: {
...mapGetters({
getid: 'getid'
})
},
//初始化数据
mounted () {
const list = localStorage.getItem('list')
this.idd = this.$route.params.id
this.list.push(JSON.parse(list))
console.log(this.list)
this.index1 = localStorage.getItem('list')
this.$axios.get(['/mv/url?id=' + this.$route.params.id])//这里的url我隐藏了。谢谢理解
.then((response) => {
// success
this.playIndex = localStorage.getItem('i')
console.log(response.data.data.url)
this.url = response.data.data.url
})
.catch((error) => {
// error
console.log(error)
})
}
}
</script>
<style scoped>
html,body{position: relative;}
.box{width: 100%;height: 100vh;background: #333;}
.sheet{height: 70vh;overflow: auto;border-top-right-radius:0.2rem;border-top-left-radius:0.2rem;z-index: 1000}
.inner{width: 100%;height: 100vh;position: relative;}
.in{width: 80%;float: left;}
.pl{width: 10%;float: right;margin-top:0.2rem ;}
.foot{width: 90%;position: absolute;bottom: 14vh;left:5% ;}
.name{color: #fff;font-size: 20px;font-weight: bold;}
.user{color: #fff;margin-bottom:0.3rem;font-size: 16px;}
video{width: 100%;height:auto;margin-top:35vh;}
.item{width: 100%;height: 100vh;}
.view{width: 100%;height: 100vh !important;}
.pll{width: 95%;margin: 10px auto;overflow: hidden;padding: 10px 0;}
.pl:last-child{border:none;}
.pl-l{width: 20%;float: left;}
.pl-l img{width: 60%;border-radius: 50%;}
.pl-r{width: 78%;float: left;}
.name1{font-size:14px;color: #666;font-weight: bold;margin-bottom: 5px;}
.con{width: 100%;line-height: 24px;color: #333333;font-size:16px;}
</style>