vue 仿照抖音视频效果（滑动切换）

看个效果图，再决定学不学

================
好像还凑合吧

那就学起来吧~~~~~~~~~~~~~~~~~~~~~~~

<template>
  <div class="container_box" id="video_box">
    <div class="van_swipe">
      <!--vant van-swipe 滑动组件 -->
      <van-swipe
        :show-indicators="false"
        @change="onChange"
        vertical
        :loop="false"
      >
        <van-swipe-item
          v-for="(item, index) in videoList"
          :key="index"
          class="product_swiper"
        >
          <div class="video_container">
            <video
              class="video_box"
              width="100%"
              height="100%"
              webkit-playsinline="true"
              x5-playsinline=""
              x5-video-player-type="h5"
              x5-video-player-fullscreen=""
              playsinline
              preload="auto"
              :poster="item.cover"
              :src="item.url"
              :playOrPause="playOrPause"
              x-webkit-airplay="allow"
              x5-video-orientation="portrait"
              @click="pauseVideo"
              @ended="onPlayerEnded($event)"
              loop="loop"
            ></video>
            <!-- 封面 -->
            <img
              v-show="isVideoShow"
              class="play"
              @click="playvideo"
              :src="item.cover"
            />
            <!-- 播放暂停按钮 -->
            <img
              v-show="iconPlayShow"
              class="icon_play"
              @click="playvideo"
              src="../resource/icon_play.png"
            />
          </div>
          <!-- 右侧点赞、分享功能 -->
          <div class="tools_right">
            <div class="tools_r_li" @click="changeFollow(item, index)">
              <i
                class="iconfont icon-yixianshi-"
                :class="item.follow ? 'follow_active' : ''"
              ></i>
              <div class="tools_r_num">{
   {
   item.loveCount}}w</div>
            </div>
            <div class="tools_r_li" @click="changeShare">
              <i class="iconfont icon-tubiao-"></i>
              <div class="tools_r_num">{
   {
   item.shareCount}}w</div>
            </div>
          </div>
          <!-- 底部作品描述 -->
          <div class="production_box">
            <div class="production_name">@{
   {
   item.name}}</div>
            <div class="production_des">
              <i
                v-for="(list, index) in item.buyShopList" 
                :key="index" 
                class="production_des_i"
                @click="copyShopName(list.ShopUrl)"
              >
                {
   {
   list.ShopName}}
              </i>
            </div>
          </div>
        </van-swipe-item>
      </van-swipe>
      <!--底部操作栏-->
      <div class="container_bottom">
        <div
          class="bottom_tab"
          :class="tabIndex == 0 ? 'tab_active' : ''"
          @click="changeTab(0)"
        >
          <span class="bottom_tab_span">首页</span>
        </div>
        <div
          class="bottom_tab"
          :class="tabIndex == 1 ? 'tab_active' : ''"
          @click="changeTab(1)"
        >
          <span class="bottom_tab_span">设置</span>
        </div>
      </div>
      <!--分享弹框-->
      <div class="share_hover"></div>
      <div class="share_box" :class="showShareBox ? 'share_active' : ''">
        <div class="share_tips">分享到</div>
        <ul class="share_ul">
          <li class="share_li pengyouquan_li">
            <i class="iconfont icon-pengyouquan"></i>
          </li>
          <li class="share_li">
            <i class="iconfont icon-weixin"></i>
          </li>
          <li class="share_li" @click="copyUrl">
            <i class="iconfont icon-lianjie"></i>
          </li>
          <div class="clear"></div>
        </ul>
        <div class="share_cancel" @click="cancelShare">取消</div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import {
    Swipe, SwipeItem, Toast } from "vant";
Vue.use(Swipe).use(SwipeItem);
export default {
   
  name: "videoChild",
  data() {
   
    let u = navigator.userAgent;
    return {
   
      current: 0,
      videoList: [
        {
   
          url: "https://video.pearvideo.com/mp4/third/20201113/cont-1706821-15126082-111655-hd.mp4",
          cover: "https://image-cn2.tvcbook.com/v7/image/2020/11/13/8a7b666e-0ac8-4e34-b549-8360b1569e54.png!cover-780-439?x-oss-process=image/crop,x_0,y_72,w_1080,h_608,g_nw",
          follow: false,
          loveCount: 24,
          shareCount: 12,
          name: '智.混动',
          buyShopList: [
            {
   
              ShopName: '淘宝',
              ShopUrl: 'http://taobao.com'
            },
            {
   
              ShopName: '天猫',
              ShopUrl: 'http://taobao.com'
            },
            {
   
              ShopName: '京东',
              ShopUrl: 'http://taobao.com'
            }
          ]
        },
        {
   
          url: "https://video.pearvideo.com/mp4/third/20201114/cont-1707004-15488237-105621-hd.mp4",
          cover: "https://image-cn2.tvcbook.com/daq/2020/11/12/de65881c-24b0-11eb-84ef-02420a0008fb.png!cover-780-439",
          follow: false,
          loveCount: 28,
          shareCount: 2,
          name: '用jio看世界，发现更多乐趣',
          buyShopList: [