Vue+vant仿抖音滑动浏览视频

浏览器视频不支持自动播放，所以第一个视频需要手动触发播放，仅供参考

<style lang="less" scoped>
.main {
  width: 100%;
  height: 100%;
  background: #fff;
  .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 0.2rem;
    text-align: center;
    background-color: #39a9ed;
    position: relative;
    .video-content {
      width: 100%;
    }
    .right_menus {
      position: absolute;
      width: 1.2rem;
      padding: 0.02rem;
      box-sizing: border-box;
      bottom: 1.2rem;
      right: 0;
      .menuClick {
        position: relative;
        width: 100%;
        margin-bottom: 0.2rem;
        .avatar {
          width: 1rem;
          height: 1rem;
          border-radius: 50%;
          border: #fff 0.02rem solid;
        }
      }
      .click-info {
        position: relative;
        width: 1.2rem;
        img {
          width: 0.72rem;
          height: 0.72rem;
        }
        .text {
          width: 100%;
          height: 0.5rem;
          line-height: 0.5rem;
          color: #fff;
          font-size: 0.16rem;
        }
      }
    }
    .text-container {
      position: absolute;
      width: 6rem;
      left: 0;
      bottom: 0;
      padding: 0.2rem 0.1rem;
      box-sizing: border-box;
      .nickname {
        width: 100%;
        font-size: 0.32rem;
        color: #fff;
        height: 0.42rem;
        line-height: 0.42rem;
        text-align: left;
      }
      .msg {
        position: relative;
        width: 100%;
        padding: 0.1rem 0;
        box-sizing: border-box;
        line-height: 0.3rem;
        font-size: 0.28rem;
        text-align: left;
      }
    }
  }
}
</style>
<template>
  <div class="main">
    <van-swipe
      class="my-swipe"
      :show-indicators="false"
      :loop="false"
      @change="onChange"
      style="height: 100vh"
      vertical
      indicator-color="white"
    >
      <van-swipe-item v-for="(item, index) in swiperList" :key="index">
        <div class="right_menus">
          <div class="menuClick">
            <img class="avatar" :src="item.avatar" alt="" />
            <div class="follow"></div>
          </div>
          <div class="click-info">
            <img class="icon" src="@assets/icon/icon_01.png" alt="" />
            <div class="text">{{ item.fabulousNum }}</div>
          </div>
          <div class="click-info">
            <img class="icon" src="@assets/icon/icon_02.png" alt="" />
            <div class="text">{{ item.commentNum }}</div>
          </div>
          <div class="click-info">
            <img class="icon" src="@assets/icon/icon_03.png" alt="" />
            <div class="text">{{ item.shareNum }}分享</div>
          </div>
        </div>
        <div class="text-container">
          <div class="nickname">@{{ item.nickname }}</div>
          <div class="msg">{{ item.msgInfo }}</div>
        </div>
        <video
          class="video-content"
          :id="`player${index}`"
          :src="item.url"
        ></video>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script>
import avatar1 from "@assets/avatar/avatar_01.jpg";
import avatar2 from "@assets/avatar/avatar_02.jpg";
import avatar3 from "@assets/avatar/avatar_03.jpg";
import avatar4 from "@assets/avatar/avatar_04.jpg";
export default {
  data() {
    return {
      playing: false,
      swiperList: [
        {
          avatar: avatar1,
          fabulousNum: "1234W",
          commentNum: "3.2W",
          shareNum: "1.2W",
          nickname: "我是大憨批",
          play: false,
          url: "/ugctest/1603267173372/howesw.mp4",
          msgInfo:
            "这是留言这是留言这是留言这是留言这是留言这是留言这是留言这是留言",
        },
        {
          avatar: avatar2,
          fabulousNum: "558W",
          commentNum: "16.2W",
          shareNum: "12.2W",
          nickname: "liqin是个Der",
          play: false,
          url: "/ugctest/1603267173372/howesw.mp4",
          msgInfo:
            "这是留言这是留言这是留言这是留言这是留言这是留言这是留言这是留言",
        },
        {
          avatar: avatar3,
          fabulousNum: "3345W",
          commentNum: "122W",
          shareNum: "62W",
          nickname: "Hello Nick",
          play: false,
          url: "/ugctest/1603267173372/howesw.mp4",
          msgInfo:
            "这是留言这是留言这是留言这是留言这是留言这是留言这是留言这是留言",
        },
        {
          avatar: avatar4,
          fabulousNum: "6889W",
          commentNum: "163W",
          shareNum: "107W",
          nickname: "憨憨来啦",
          play: false,
          url: "/ugctest/1603267173372/howesw.mp4",
          msgInfo:
            "这是留言这是留言这是留言这是留言这是留言这是留言这是留言这是留言",
        },
      ],
    };
  },
  created() {
    document.title = "测试swiper";
  },
  mounted() {
    setTimeout(() => {
    }, 1000);
  },
  methods: {
    onChange(index) {
      console.log(index);
      var player = document.getElementById(`player${index}`);
      if (player.paused) {
        this.swiperList.forEach((item, s_index) => {
          if (s_index == index) {
            document.getElementById(`player${s_index}`).play();
            item.play = true;
          } else {
            document.getElementById(`player${s_index}`).pause();
            item.play = false;
          }
        });
      } else {
        this.swiperList.forEach((item, s_index) => {
          document.getElementById(`player${s_index}`).pause();
          item.play = false;
        });
      }
    },
  },
};
</script>