[[351990]]

 前言

平常在玩短視頻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