关于个人项目（臻美MV【仿抖音App】）滑动切换视频的分析（前端角度）

桃扇骨 2021-10-01 03:08 338阅读 0赞

我们知道你天天刷抖音的时候可以上滑切换视频，互不影响。那么我们站在前端的角度能否可以实现这种效果呢？  
这是我的个人项目：**臻美MV**

下面我是用**Vue**写的，现在我把它开源。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]

## 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>

我还有微信小程序，这里我也分享给大家。

## 微信小程序: ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 3]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 4]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 5]

**MV界面**

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

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

如果有疑问请在下面评论吧，我会及时回复你的。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210812/261905520a9a4e78baa0856ed04a0321.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210812/b6bcd20916ed46b7a4645d8acb05b41a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210812/3b891b3b91234d299c9e4a7f8e3a55e4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 3]: /images/20210812/529e132bb55c4aba86c6fd379a9dd80a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 4]: /images/20210812/a600ab2716de46818033740e3c73b46b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 5]: /images/20210812/976e0ab0e38d48698c9dcd960d94a2c8.png