收藏
回答

swiper怎么取消回弹效果?

swiper组件切换到第一个或者最后一个会有回弹的效果(和ios页面上拉下拉回弹效果差不多),这种回弹可以取消吗

回答关注问题邀请回答
收藏

5 个回答

  • Wachten🍃จุ๊บ
    Wachten🍃จุ๊บ
    2023-11-27

    发现一个曲线救国的方法,禁用掉swiper-item 的所有滑动,然后自己写滑动逻辑判断上下滑动,亲测管用

    <swiper-item catchtouchmove="handleTouchMove" >
    Page({
    // 其他页面配置...
    startY: 0, // 记录初始触摸点的Y坐标
     handleTouchMove: function (e) {
        // 获取触摸点的坐标信息
        const touch = e.touches[0];
        // 如果 startY 为 0,表示是初始触摸,记录初始触摸点的Y坐标
        if (this.startY === 0) {
          this.startY = touch.clientY;
          return;
        }
        // 计算Y坐标的变化
        const deltaY = touch.clientY - this.startY;
        // 判断是上滑还是下滑
        if (deltaY < 0) {
          console.log('上滑');
        } else if (deltaY > 0) {
          console.log('下滑');
        }
        // 重置 startY 为 0,以便下一次触摸事件
        this.startY = 0;
      },
      // 其他事件处理函数...
    })
    
    2023-11-27
    有用 1
    回复
  • 你猜
    你猜
    2023-02-02

    最近正好解决了这个问题,发现了一个骚操作,可以解除回弹。

    伪代码如下:

    <swiper-item wx:for="{{slotArr}}" class="pane__swiper-item" style="height: 100%"  
          bind:touchmove="{{WXS.swiperItemTouchMove}}"
        >
    </swiper-item>
    
    //wxs
    swiperItemTouchMove: function(event, instance) {
     return false;   可禁止滑动
    }
    
    2023-02-02
    有用
    回复 1
    • 九歌^
      九歌^
      2023-08-23
      这是禁止整个swiper滑动  不是禁止回弹。。。
      2023-08-23
      回复
  • 游戏人生
    游戏人生
    2023-01-28

    回弹? 目前官方的swiper组件不行,

    2023-01-28
    有用
    回复
  • 杨泉
    杨泉
    2023-01-28

    可惜,不能,swiper没有bounce属性

    这个似乎已经提了很多年了

    2023-01-28
    有用
    回复
  • showms
    showms
    2023-01-28

    貌似不行,其实有回弹感觉挺好的。。

    2023-01-28
    有用
    回复
登录 后发表内容