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 }) } }) } })
