这一次需求，把握有几成？
码来

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

image.png