微信小程序之swiper限制循环滑动

最新推荐文章于 2025-05-19 14:53:27 发布

Wenjian96

最新推荐文章于 2025-05-19 14:53:27 发布

阅读量8.1k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签： w we

本文链接：https://blog.youkuaiyun.com/weixin_37378399/article/details/82023479

微信小程序专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在Swiper组件中实现特定页面间的滑动限制，避免从首页直接滑到尾页或反之，通过修改touchEnd函数中的逻辑，确保用户体验的同时满足客户需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接的一个单子是使用swiper来达到页面之间完美滑动的效果的。也就三个页面首页、内容页、尾页。

但是客户要求首页不能滑到尾页，尾页不能滑到首页。

在官方文档中没有找到方法，因此只能绕弯路了。

wxml页面代码：重点在于 current='{{show_index}}'

<swiper class='swiper' circular='true' vertical='true' bindtouchstart='touchStart' bindtouchend='touchEnd' animation="{{animationData}}" current='{{show_index}}'>

js页面代码：

data: {
    animationData: {},
    show_index: 0,
    list_length: 1,
    lastY: 0,
    list:[],
}

let index = _this.data.show_index;
let length = _this.data.list_length;    //内容页的长度

接下来是在touchEnd的函数中：

if (endY > locationY) { //下拉，回到前一页
      if(index == 0){ //禁止从内容第一页回到首页
        _this.setData({
          show_index: index
        })
        return;
      }
      //下面是下拉事件的相关代码，这里就不添出来了。
}
else { //上拉，前往下一页
      if (index == (length+1)){  //禁止从尾页 前往 首页
        _this.setData({
          show_index: index
        })
        return;
      }
      //下面是上拉事件的相关代码，这里就不添出来了。
}