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

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

      })

  }

}

更多内容请见原文，原文转载自：https://blog.csdn.net/weixin_44519496/article/details/118693036

巴特西

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

最新文章

热门文章