关于个人项目(臻美MV【仿抖音App】)滑动切换视频的分析(前端角度)
我们知道你天天刷抖音的时候可以上滑切换视频,互不影响。那么我们站在前端的角度能否可以实现这种效果呢?这是我的个人项目:臻美MV下面我是用Vue写的,现在我把它开源。Vue:初始界面<template><div class="box jz"><div><img src="../assets/MV.png" alt...
·
我们知道你天天刷抖音的时候可以上滑切换视频,互不影响。那么我们站在前端的角度能否可以实现这种效果呢?
这是我的个人项目:臻美MV
下面我是用Vue写的,现在我把它开源。
Vue:
初始界面
<template>
<div class="box jz">
<div>
<img src="../assets/MV.png" alt="">
</div>
<mu-button fab color="primary" @click="go" class="go" >
<mu-icon value="arrow_right_alt" color="white" size="34"></mu-icon>
</mu-button>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
msg: ''
}
},
methods: {
go () {
this.$router.push({
name: 'mv',
params: {
id: this.$store.state.id
}
})
}
},
mounted () {
this.$axios.get(['/top/mv?limit=5'])
.then((response) => {
// success
let num = Math.floor(Math.random() * 5 + 1)
localStorage.setItem('i', num)
console.log(response.data.data)
localStorage.setItem('list', JSON.stringify(response.data.data[num]))
this.$store.state.id = response.data.data[num].id
})
.catch((error) => {
// error
console.log(error)
})
}
}
</script>
<style scoped>
@keyframes my{
from{opacity: 0;}
to{opacity: 1;}
}
.go{margin-top:60px ;}
.jz{animation:my 0.3s;}
.box{text-align: center;}
.box img{width: 25%;margin-top:25vh;}
</style>
MV界面
<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>
我还有微信小程序,这里我也分享给大家。
微信小程序:
MV界面
wxml
<!--pages/video/video.wxml-->
<view class="container">
<view class="page-body">
<view class="page-section page-section-spacing swiper">
<swiper current="{{current}}" bindchange='onSlideChangeEnd'
autoplay="{{autoplay}}" circular="{{circular}}" vertical="{{vertical}}"
interval="{{interval}}" duration="{{duration}}" previous-margin="{{previousMargin}}px" next-margin="{{nextMargin}}px" >
<block wx:for="{{vlists}}" wx:key="index" wx:for-item="item">
<swiper-item bindtouchstart="touchStart">
<view class="swiper-item " >
<view><image src="https://www.maomin.club/data/pl.png" class="pl" bindtap='showFrame' id='i{{index}}'></image></view>
<video src="{{url}}" wx:if='{{playIndex==index}}' autoplay="{{true}}" controls='{{controls}}' id="{{index}}" ></video>
<view wx:if="{{index==0}}" class="start" bindtap="cli">点我一下,精彩MV马上开始</view>
<view class="foot">
<view class="songer">@ {{item.artistName}}</view>
<view class="name">{{item.name}}</view>
</view>
<view wx:if='{{flag}}'>
<view class='wrap {{wrapAnimate}}' style='background:rgba(0,0,0,{{bgOpacity}});'></view>
<view catchtap='hideFrame' class='frame-wrapper {{frameAnimate}}'>
<view catchtap='catchNone' class='frame' >
<scroll-view class="title-wrapper" scroll-y style="width: 100%" bindscrolltolower='down1' id='s{{index}}'>
<view wx:for="{{plist}}" wx:key="index" wx:for-item="item" class="plitem">
<view class="plitem_l">
<image src="{{item.user.avatarUrl}}"></image>
</view>
<view class="plitem_r">
<view class="username">{{item.user.nickname}}</view>
<view class="content"> {{item.content}}</view>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
</view>
</swiper-item>
</block>
</swiper>
</view>
</view>
</view>
wxss
/* pages/video/video.wxss */
page { height: 100%; font-size: 32rpx; background: #000; }
swiper{ height:100vh; }
.swiper-item{ display: block; height:100%; position: relative; align-items: center; justify-content: center; font-size: 36rpx; }
.cover{ width: 100%; height:100vh ; }
.name{ color: #fff; font-size: 34rpx; font-weight: bold; }
video{ width: 100%; height: 100vh; }
.start{ color: #fff; text-align: center; line-height: 65vh; }
.songer{ color: #fff; font-size: 26rpx; margin-bottom:25rpx; }
.pl{ width:10%; height:74rpx; float: right;position: absolute;right: 4%;bottom:13vh;z-index: 100; }
.foot{width: 70%; position: absolute; bottom: 10%; left: 5%; }
.wrapAnimate{animation: wrapAnimate 0.5s ease-in-out forwards}
@keyframes wrapAnimate{
0%{}
100%{background:rgba(0,0,0,0.35);}
}
.wrapAnimateOut{animation: wrapAnimateOut 0.4s ease-in-out forwards}
@keyframes wrapAnimateOut{
0%{background:rgba(0,0,0,0.35);}
100%{background:rgba(0,0,0,0);}
}
.frameAnimate{animation: frameAnimate 0.5s ease forwards;}
@keyframes frameAnimate{
0%{}
100%{opacity: 1;top:0vh;}
}
.frameAnimateOut{animation: frameAnimateOut 0.4s ease forwards;}
@keyframes frameAnimateOut{
0%{opacity: 1;top:0vh;}
100%{opacity: 0;top:100vh;}
}
.frame-wrapper{position: fixed;height:100vh;width:100vw;z-index: 2;top: 50vh;}
.frame{background: #fff; position: absolute;bottom: 0;width: 88.2vw;padding: 5.9vw 5.9vw 0;border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;z-index: 3;}
.title-wrapper { justify-content: space-between; font-size: 4.9vw; color: #4a4a4a; margin-bottom: 5.9vw; height: 70vh; }
.title-wrapper>image{width:3.2vw;height:3.2vw;padding:0 5vw;margin-right:-5vw;}
.flex{display: flex;align-items: center;}
.wrap{position: fixed;z-index: 1;top: 0;left: 0;right: 0;bottom: 0;}
::-webkit-scrollbar { width: 0; height: 0; color: transparent; }
.plitem{ overflow: hidden; margin:45rpx 0; }
.plitem_l{ width: 12%; float: left; }
.plitem_l image{ width: 100%; height: 78rpx; border-radius:50%; margin-top:10rpx; }
.plitem_r{ width: 84%; float: right; }
.username{ font-size: 28rpx; color: #666; margin-bottom:18rpx; }
.content{ font-size: 28rpx; color: #333; }
js
Page({
data: {
vlists:'',
vertical: true,
autoplay: false,
controls:false,
circular: false,
interval: 2000,
duration: 1000,
previousMargin: 0,
nextMargin: 0 ,
num:1,
iid:'',
url:'',
current:0,
playIndex: null,
flag: false,
wrapAnimate: 'wrapAnimate',
bgOpacity: 0,
frameAnimate: 'frameAnimate',
plist:'',
con:1
},
// 点击
cli:function () {
var that = this
wx.request({
url: '/mv/url?id=' + that.data.vlists[0].id, //这里的url我隐藏了。谢谢理解
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
that.setData({
url: res.data.data.url
})
that.setData({
playIndex: 0
})
}
})
},
// 滚动到底部
down1:function (e) {
var that = this
console.log(e.currentTarget.id)
var i = e.currentTarget.id;
var b = i.substr(1, 1)
that.data.con+=20
console.log(that.data.con)
wx.request({
url: '/comment/mv?id=' + that.data.vlists[b].id + '&limit=' + that.data.con,//这里的url我隐藏了。谢谢理解
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data.comments)
that.setData({
plist: res.data.comments
})
}
})
},
// 弹窗
showFrame(e) {
const that = this;
console.log(e.currentTarget.id)
var i = e.currentTarget.id;
var b=i.substr(1,1)
console.log(b)
wx.request({
url: '/comment/mv?id=' + that.data.vlists[b].id + '&offset=' + that.data.con,//这里的url我隐藏了。谢谢理解
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data.comments)
that.setData({
plist: res.data.comments
})
}
})
this.setData({
flag: true,
wrapAnimate: 'wrapAnimate',
frameAnimate: 'frameAnimate'
});
},
hideFrame() {
const that = this;
that.setData({
wrapAnimate: 'wrapAnimateOut',
frameAnimate: 'frameAnimateOut'
});
setTimeout(() => {
that.setData({
flag: false
})
}, 400)
},
catchNone() {
//阻止冒泡
},
_showEvent() {
this.triggerEvent("showEvent");
},
_hideEvent() {
this.triggerEvent("hideEvent");
},
// 滑动事件:
onSlideChangeEnd: function (e) {
var that = this
console.log('本页:'+e.detail.current)
wx.request({
url: '/mv/url?id=' + that.data.vlists[e.detail.current].id, //这里的url我隐藏了。谢谢理解
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
that.setData({
playIndex: e.detail.current
})
that.setData({
url: res.data.data.url
})
}
})
},
// 触摸开始事件
touchStart: function (e) {
var that = this
that.data.num++
wx.request({
url: '/top/mv?limit=' + that.data.num, //这里的url我隐藏了。谢谢理解
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data.data)
that.setData({
vlists: res.data.data
})
}
})
},
// 加载
onLoad:function () {
var that = this
wx.request({
url: '/top/mv?limit=1', //这里的url我隐藏了。谢谢理解
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data.data)
that.setData({
vlists: res.data.data
})
}
})
}
})
如果有疑问请在下面评论吧,我会及时回复你的。
更多推荐
已为社区贡献49条内容
所有评论(0)