小程序swiper滑动/释放查看详情效果的实现方案

2024-01-21 19:56:13

哈喽，小伙伴们大家好！我是疯狂的小波！最美最帅的小程序高级工程师！最近，我们组在做的小程序要实现一个图片切换滑动查看详情的效果，如上图：也就是说，每张图片都能切换，切换到最后一张图片时，继续左滑，显示滑动查看详情模块，并且左滑指定距离后，文案变成释放查看详情，此时手势释放就会跳转到详情页。为了不继续浪费小伙伴们的时间，那么接下来我们一起开始学起来吧！

实现原理

这个效果的实现原理并不复杂，我们主要通过swiper组件的bindchange事件来监听当前的current值，当current值等于最后一张图片的索引时，我们再通过bindtouchstart和bindtouchmove事件来监听用户的滑动方向和距离，当用户滑动距离达到一定值时，我们就显示出滑动查看详情模块，当用户继续滑动并达到释放阈值时，我们就跳转到详情页。

代码实现

// 小程序页面js
Page({
  data: {
    swiperList: [
      {
        id: 1,
        image: 'https://img.url/1.jpg'
      },
      {
        id: 2,
        image: 'https://img.url/2.jpg'
      },
      {
        id: 3,
        image: 'https://img.url/3.jpg'
      }
    ],
    currentIndex: 0, // 当前swiper的索引
    isLastSwiper: false, // 是否是最后一张swiper
    showDetail: false, // 是否显示滑动查看详情模块
    releaseText: '滑动查看详情' // 滑动查看详情模块文案
  },
  onLoad() {
    // 获取swiper组件
    this.swiper = this.selectComponent('#swiper');
  },
  // 监听swiper切换事件
  bindchange(e) {
    const { current } = e.detail;
    this.setData({
      currentIndex: current
    });

    // 判断是否是最后一张swiper
    this.isLastSwiper = current === this.data.swiperList.length - 1;
  },
  // 监听手指触摸开始事件
  bindtouchstart(e) {
    // 判断是否是最后一张swiper
    if (!this.isLastSwiper) {
      return;
    }

    // 记录触摸开始时的x坐标
    this.startX = e.touches[0].clientX;

    // 显示滑动查看详情模块
    this.setData({
      showDetail: true
    });
  },
  // 监听手指触摸移动事件
  bindtouchmove(e) {
    // 判断是否是最后一张swiper
    if (!this.isLastSwiper) {
      return;
    }

    // 计算手指移动的距离
    const deltaX = e.touches[0].clientX - this.startX;

    // 判断手指移动的距离是否达到显示释放文案的阈值
    if (deltaX >= 50) {
      this.setData({
        releaseText: '释放查看详情'
      });
    }
  },
  // 监听手指触摸结束事件
  bindtouchend(e) {
    // 判断是否是最后一张swiper
    if (!this.isLastSwiper) {
      return;
    }

    // 计算手指移动的距离
    const deltaX = e.changedTouches[0].clientX - this.startX;

    // 判断手指移动的距离是否达到跳转详情页的阈值
    if (deltaX >= 100) {
      // 跳转到详情页
      wx.navigateTo({
        url: '/pages/detail/index?id=' + this.data.swiperList[this.data.currentIndex].id
      });
    } else {
      // 隐藏滑动查看详情模块
      this.setData({
        showDetail: false
      });
    }
  }
});

常见问题

为什么我在滑动最后一张图片时，没有出现滑动查看详情模块？

可能是因为你没有在bindchange事件中判断是否是最后一张图片。
为什么我在滑动最后一张图片时，滑动查看详情模块一直显示着？

可能是因为你没有在bindtouchend事件中判断手指移动的距离是否达到隐藏模块的阈值。
为什么我在滑动最后一张图片时，无法跳转到详情页？

可能是因为你没有在bindtouchend事件中判断手指移动的距离是否达到跳转详情页的阈值。