小程序
小游戏
企业微信
微信支付
扫描小程序码分享
swiper组件切换到第一个或者最后一个会有回弹的效果(和ios页面上拉下拉回弹效果差不多),这种回弹可以取消吗
5 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
发现一个曲线救国的方法,禁用掉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; }, // 其他事件处理函数... })
你好,麻烦通过点击下方“反馈信息”按钮,提供出现问题的。
最近正好解决了这个问题,发现了一个骚操作,可以解除回弹。
伪代码如下:
<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; 可禁止滑动 }
回弹? 目前官方的swiper组件不行,
可惜,不能,swiper没有bounce属性
这个似乎已经提了很多年了
貌似不行,其实有回弹感觉挺好的。。
关注后,可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
发现一个曲线救国的方法,禁用掉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; }, // 其他事件处理函数... })
最近正好解决了这个问题,发现了一个骚操作,可以解除回弹。
伪代码如下:
<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; 可禁止滑动 }
回弹? 目前官方的swiper组件不行,
可惜,不能,swiper没有bounce属性
这个似乎已经提了很多年了
貌似不行,其实有回弹感觉挺好的。。