小程序
小游戏
企业微信
微信支付
扫描小程序码分享
使用swiper组件的next-margin时最后一页的右边显示空白是为什么？
3 个回答
加粗
标红
插入代码
插入链接
插入图片
上传视频
设置swiper属性snap-to-edge="true"
官方文档：当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素。
你好，麻烦通过点击下方“反馈信息”按钮，提供出现问题的。
比较喜欢这种处理细节的楼主，我也遇到了这个问题，说下我的一个处理方案，仅供参考。
我之前也是动态去改变nextMargin这个值，也会遇到你说的那个“视觉效果”问题，就是很明显没有动画效果了，但是后面处理了下，具体处理方案（Taro例子）：
// 生命周期初始化要调用一次 this.getNextMargin(); //... const { nextMargin } = this.state; //... onChange = (e: any) => { const { detail: { current } } = e; this.setState({ current }, this.getNextMargin); }; //... // 间隔200这个可以控制一个合理的数值 getNextMargin = () => { const { current, swiperList } = this.state; setTimeout(() => { this.setState({ nextMargin: current === swiperList.length - 1 ? '30rpx' : '60rpx' }); }, 200); }; //... //...
因为加了next-margin啊 到最后一页next-margin = 0 就不会有吧
关注后，可在微信内接收相应的重要提醒。
请使用微信扫描二维码关注 “微信开放社区” 公众号
设置swiper属性snap-to-edge="true"
官方文档：当 swiper-item 的个数大于等于 2，关闭 circular 并且开启 previous-margin 或 next-margin 的时候，可以指定这个边距是否应用到第一个、最后一个元素。
比较喜欢这种处理细节的楼主，我也遇到了这个问题，说下我的一个处理方案，仅供参考。
我之前也是动态去改变nextMargin这个值，也会遇到你说的那个“视觉效果”问题，就是很明显没有动画效果了，但是后面处理了下，具体处理方案（Taro例子）：
// 生命周期初始化要调用一次 this.getNextMargin(); //... const { nextMargin } = this.state; //... onChange = (e: any) => { const { detail: { current } } = e; this.setState({ current }, this.getNextMargin); }; //... // 间隔200这个可以控制一个合理的数值 getNextMargin = () => { const { current, swiperList } = this.state; setTimeout(() => { this.setState({ nextMargin: current === swiperList.length - 1 ? '30rpx' : '60rpx' }); }, 200); }; //... //...因为加了next-margin啊 到最后一页next-margin = 0 就不会有吧