前言

平常在玩短视频App时，喜欢看的视频可以多看一会，不喜欢看的视频直接往上一划，这个功能一直深受用户喜爱。今天我们不妨实现一个这样功能的App。

功能

1. 上下滑动切换视频

2. 可查看对应视频下的评论

示例

下面我挑出了几张代表性的图片，供大家参考。

下载链接

以上是我自己做的一款App的示例图，如果感兴趣的小伙伴，大家可以下载到手机上体验。目前只是开发了安卓版本。

`链接: https://pan.baidu.com/s/1dbgx9eht54qh-Ig04w2JAg   
提取码: 96ta   
复制这段内容后打开百度网盘手机App，操作更方便哦  
`

核心代码

<template>  
  <div class="home">  
    <van-swipe  
      style="height: 100vh"  
      vertical  
      @change="onChange"  
      :show-indicators="false"  
    >  
      <van-swipe-item>  
        <div class="main" v-if="isshow">  
          <video-player  
            v-if="playerOptions.sources[0].src"  
            class="video-player vjs-custom-skin"  
            ref="videoPlayer"  
            :playsinline="true"  
            :options="playerOptions"  
          ></video-player>  
          <div class="footbox">  
            <div class="foot">  
              <p class="user">@ {{ artistName }}</p>  
              <p class="name">{{ name }}</p>  
            </div>  
            <div class="pl" @click="openPl">  
              <van-icon name="chat" size="30" />  
            </div>  
          </div>  
        </div>  
      </van-swipe-item>  
      <van-swipe-item>  
        <div class="main" v-if="!isshow">  
          <video-player  
            v-if="playerOptions.sources[0].src"  
            class="video-player vjs-custom-skin"  
            ref="videoPlayer"  
            :playsinline="true"  
            :options="playerOptions"  
          ></video-player>  
          <div class="footbox">  
            <div class="foot">  
              <p class="user">@ {{ artistName }}</p>  
              <p class="name">{{ name }}</p>  
            </div>  
            <div class="pl" @click="openPl">  
              <van-icon name="chat" size="30" />  
            </div>  
          </div>  
        </div>  
      </van-swipe-item>  
    </van-swipe>  
    <van-action-sheet v-model="show" class="sheet">  
      <van-list  
        v-model="loading"  
        @load="onLoad"  
        :offset="1"  
        :immediate-check="false"  
      >  
        <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>  
      </van-list>  
    </van-action-sheet>  
  </div>  
</template>  

<script>  
import { list, mv, pl } from "@request/api";  
import "../video/index";  
import { videoPlayer } from "vue-video-player";  
export default {  
  name: "home",  
  data() {  
    return {  
      list: "",  
      id: "",  
      show: false,  
      dataLength: 1,  
      inx: 0,  
      artistName: "",  
      name: "",  
      isshow: true,  
      plist: "",  
      loading: false,  
      page: 10,  
      playerOptions: {  
        autoplay: true, //如果true,浏览器准备好时开始回放。  
        muted: false, // 默认情况下将会消除任何音频。  
        loop: false, // 导致视频一结束就重新开始。  
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）  
        language: "zh-CN",  
        poster:"",  
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）  
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。  
        sources: [{ type: "video/mp4", src: "" }],  
        width: document.documentElement.clientWidth,  
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。  
        controlBar: {  
          timeDivider: true, // 分时  
          durationDisplay: true, // 持续时间显示  
          remainingTimeDisplay: false, // 剩余时间显示  
          fullscreenToggle: false, //全屏按钮  
        },  
      },  
    };  
  },  
  components: {  
    videoPlayer,  
  },  
  mounted() {  
    this.wait();  
  },  
  methods: {  
    // 首次获取url  
    async wait() {  
      let id = await this.get();  
      let res = await mv(id);  
      // this.playerOptions.poster = this.poster;  
      this.$set(this.playerOptions, "poster", this.poster);  
      this.$set(this.playerOptions.sources[0], "src", res.data.url);  
    },  
    // 加载评论  
    onLoad() {  
      setTimeout(() => {  
        this.page += 10;  
        this.getpl();  
        this.loading = false;  
      }, 500);  
    },  
    // 获取数据  
    get() {  
      return list(this.dataLength).then((res) => {  
        console.log(res.data);  
        this.urlData = res.data;  
        this.poster = this.urlData[this.inx].cover;  
        this.id = this.urlData[this.inx].id;  
        this.artistName = this.urlData[this.inx].artistName;  
        this.name = this.urlData[this.inx].name;  
        // return this.id;  
        return Promise.resolve(this.id);  
        // 等价于  
        // return new Promise((resolve) => {  
        //   resolve(this.id)  
        // })  
      });  
    },  
    // 封装静态数据  
    getStatic(v) {  
      this.id = v[this.inx].id;  
      this.artistName = v[this.inx].artistName;  
      this.name = v[this.inx].name;  
      this.poster = v[this.inx].cover;  
      return this.id;  
    },  
    // 获取评论  
    getpl() {  
      pl(this.id, this.page).then((res) => {  
        if (document.querySelector(".van-action-sheet__content")) {  
          document.querySelector(".van-action-sheet__content").scrollTop = 0;  
        }  
        this.plist = res.comments;  
      });  
    },  
    // 滑动触发  
    async onChange() {  
      console.log(this.inx);  
      this.isshow = !this.isshow;  
      this.page = 10;  
      this.getpl();  
      if (this.inx < this.urlData.length - 1) {  
        this.inx += 1;  
        let id = this.getStatic(this.urlData);  
        let res = await mv(id);  
        this.$set(this.playerOptions.sources[0], "src", res.data.url);  
        this.$set(this.playerOptions, "poster", this.poster);  
        // this.playerOptions.poster = this.poster;  
      } else {  
        this.inx = 0;  
        this.dataLength += 1;  
        this.wait();  
      }  
    },  
    // 打开评论列表  
    openPl() {  
      this.show = true;  
      this.getpl();  
    },  
  },  
};  
</script>  
<style lang="less" scoped>  
.main {  
  height: 100%;  
}  
.footbox {  
  position: relative;  
  bottom: 0;  
  width: 95%;  
  margin: 0 auto;  
  display: flex;  
  justify-content: space-between;  
  align-items: center;  
}  
.user {  
  font-size: 14px;  
}  
.user,  
.name {  
  text-overflow: ellipsis;  
  overflow: hidden;  
  white-space: nowrap;  
}  
.foot {  
  width: 80%;  
  color: #fff;  
  font-size: 16px;  
  z-index: 10001;  
}  
.pl {  
  width: 10%;  
  color: #fff;  
  font-size: 16px;  
  z-index: 10001;  
}  
.sheet {  
  height: 50vh;  
  .pll {  
    overflow: hidden;  
    padding: 10px;  
    border-bottom: 1px solid #f4f4f4;  
    .pl-l {  
      width: 20%;  
      float: left;  
    }  
    .pl-l img {  
      width: 55%;  
      border-radius: 50%;  
      animation: all ds 0.5s;  
    }  
    @keyframes ds {  
      from {  
        opacity: 0;  
      }  
      to {  
        opacity: 1;  
      }  
    }  
    .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: 14px;  
    }  
  }  
}  
</style>  

完整代码库

恭请各位大佬指正。

https://github.com/maomincoding/zm_mv2  

---

欢迎关注我的公众号前端历劫之路

回复关键词电子书，即可获取12本前端热门电子书。

回复关键词红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。

关注公众号后，点击下方菜单即可加我微信，我拉拢了很多IT大佬，创建了一个*技术交流、文章分享群，期待你的加入。

作者：Vam的金豆之路

微信公众号：前端历劫之路

本文转转自微信公众号前端历劫之路原创https://mp.weixin.qq.com/s/hFrHxBDjn_l1-v7fhA0OyQ，如有侵权，请联系删除。