用Vue3+Swiper写个TikTok

• 正文第一句：我正在参与掘金创作者训练营第5期， 点击了解活动详情

前言

很久之前因公司需求，写过类似TikTok的H5营销工具，要求要和TikTok一样：

1. 上下无限滑动；
2. 点赞、评论、分享、收藏；

MD干脆加上添加发布视频，切换好友，推荐一起来？干脆写一个TikTokApp跟TikTok对着干呗。骂归骂，需求还是要写的。呜呜呜😭

需求分析

上下无限滑动之Swiper

为什么选择使用Swiper？

免费，开源，稳定，应用广泛，文档丰富～

template

<div class="swiper-container">
	<div class="swiper-wrapper">
		<div class="swiper-slide" v-for="v in videos" @click="doubleClick($event, v.uid)">
			<video :id="'v-'+v.uid" x5-video-player-fullscreen="true" webkit-playsinline="true" x-webkit-airplay="true"
				playsinline="true" x5-playsinline :src="v?.video?.url" :poster="v?.cover"></video>
		</div>
	</div>
</div>

script

data() {
  return {
    videos: mockVideos,
    lastIndex: 0,
    currentIndex: 0,
    timer: null,
    db_star: 0,
    hearts: []
  }
},
mounted() {
  let _self = this
  // 1.swiper初始化
  var mySwiper = new Swiper('.swiper-container', {
    // 垂直切换
    direction: 'vertical',
    on: {
      slideChangeTransitionEnd: function () {
        _self.lastIndex = _self.currentIndex
        _self.currentIndex = this.activeIndex
        _self.switchVideo()
      }
    }
  })
},

双击点赞666❤️

如何判断单击或者是双击,我们就以间隔300毫秒以内的认为是双击

methods: {
  // 双击点赞
  doubleClick(e, id) {
    clearTimeout(this.timer)
    this.timer = setTimeout(() => {
      clearTimeout(this.timer)
      this.playClick(id)
      this.db_star = 0;
    }, 300)
    if (this.db_star === 0) {
      this.db_star = new Date().getTime()
    } else {
      let now = new Date().getTime()
      let del = now - this.db_star
      if (del <= 300) {
        // 双击
        clearTimeout(this.timer)
        this.likes(e, id)
      }
      this.db_star = 0;
    }
  }
}

mock数据

  // {
  //   uid: 数据uid,
  //   author: { // 作者信息
  //     url: 头像地址,
  //     nickname: 昵称
  //   },
  //   cover: 封面,
  //   desc: 'miaomiao #Animal',
  //   video: { // 视频信息
  //     url: 视频地址,
  //   },
  //   statistics: {
  //     "collect_count": 收藏量,
  //     "comment_count": 评论量,
  //     "digg_count": 点赞量,
  //     "play_count": 播放量,
  //     "share_count": 分享量
  //   },
  //   playing: 播放中
  // }
 
const VIDEOS = [
    {
    uid: 1,
    author: {
      url: 'https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b2da3f989c344b7fb134935580da72de~tplv-k3u1fbpfcp-watermark.image',
      nickname: "喵喵神火教"
    },
    cover: '',
    desc: 'miaomiao #Animal',
    video: {
      url: './static/videos/1.mp4',
    },
    statistics: {
      "collect_count": 319,
      "comment_count": 71,
      "digg_count": 6666,
      "play_count": 0,
      "share_count": 20
    },
    playing: false
  },
  {
    uid: 2,
    author: {
      url: 'https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1be58460b91e4f849451fe4a038166b7~tplv-k3u1fbpfcp-watermark.image',
      nickname: "喵喵神火教"
    },
    cover: '',
    desc: 'miaomiao #Animal',
    video: {
      url: './static/videos/2.mp4',
    },
    statistics: {
      "collect_count": 319,
      "comment_count": 71,
      "digg_count": 9999,
      "play_count": 0,
      "share_count": 20
    },
    playing: false
  }
  ];

码上掘金

来个iframe-html版本：code.juejin.cn/pen/7126420…