仿淘宝轮播图滑动查看更多

uniapp 用swiper轮播图组件，当滑到最后一张，还右滑的操作，

需求是：滑到最后一张继续右滑，就跳转页面

<template>
  <view class="uni-margin-wrap">
    <swiper class="swiper" @animationfinish="handleAnimationFinish" @transition="handleTransition" indicator-dots indicator-color='#fff'
      :autoplay="false" :interval="2000" :duration="500">
      <swiper-item class="swiper-item" v-for="item in 3" :key="item">
        <image src="../../static/1.gif"></image>
      </swiper-item>
    </swiper>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        currentIndex: 0, // 当前swiper的索引
        swiperElement: null, // 缓存swiper DOM元素
        swiperWidth: 0, // 缓存swiper的宽度
        threshold: 0, // 滑动阈值，滑动达到这个阈值时触发导航
      };
    },
    mounted() {
      // 获取swiper元素和宽度，并缓存它们
      this.swiperElement = document.querySelector('.swiper');
      this.swiperWidth = this.swiperElement.clientWidth;
      // 设置滑动的阈值为上面元素的四分之一
      this.threshold = this.swiperWidth / 4;
    },
    methods: {
      // 处理swiper滑动过渡事件
      handleTransition(e) {
        //2代表下标改为轮播图数组长度-1拿最后一个下标
        if (this.swiperElement && this.currentIndex === 2) {
          // 如果当前swiper索引为最后一个，即判断滑动距离是否达到阈值
          if (e.detail.dx >= this.threshold) {
            // 检查滑动距离是否达到阈值
            uni.navigateTo({
              url: `/pages/home/home`
            });
          }
        }
      },
      // 处理swiper动画完成事件
      handleAnimationFinish(e) {
        this.currentIndex = e.detail.current;
      },
    }
  };
</script>
<style>
  .swiper {
    height: 400rpx;
  }

  .swiper-item {
    width: 100%;
  }

  .swiper-item image {
    width: 100%;
  }
</style>