Vue.js logo

vue-awesome-swiperでループをさせるが, 先頭の場合だけ戻るスワイプをできないようにする

2021/03/08

背景

動画をTikTok風に閲覧できるUIにするために, vue-awesome-swiperを利用していた.
表示順は投稿された順だったため, 最新の動画の場合は上スワイプできないようにしたいと言う要望だった.

そのため, ループができる実装にする必要があり, 上スワイプで一個新しい動画を表示し, 下スワイプで一個古い動画を表示するが, 最新の動画の場合は上スワイプできないようにする必要がある.

実装方法

allowSlidePrev をfalseにすることで, 上にスワイプできないようにする.

on.touchMove はスワイぱーを触って指を動かした際に発火する.
先頭(activeIndex: 1)で, 上スワイプ(swipeDirection: 'prev')の時は上スワイプをできないようにし, それ以外の時は許可するようにする.

<template>
  <swiper :options="swiperOptions" ref="movieSwiper">
    <swiper-slide></swiper-slide>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      swiperOptions: {
        allowSlidePrev: false,
        loop: true,
        direction: 'vertical',
        on: {
          touchMove: (swiper) => {
            if (swiper.activeIndex === 1 && swiper.swipeDirection === 'prev') {
              this.swiper.allowSlidePrev = false
            } else {
              this.swiper.allowSlidePrev = true
            }
          },
      },
    }
  },
  computed: {
    swiper() {
      return this.$refs.movieSwiper.$swiper
    },
  },
}
</script>

Twitterフォロー待ってます!