swiper的previous-margin无效
发布于 7 年前 作者 jing24 19700 次浏览 来自 问答

1、在开发者工具上，previous-margin无效。

在安卓【荣耀9】机子上，previous-margin和next-margin的值没有均分，swiper组件上分配的值是一样的大小，并且加上swiper-item的大小不超过总容器大小。

在IOS【苹果5】机子上previous-margin和next-margin均失效。

2、由于该组件是修改swiper-item的style值，导致我想改变当前显示的滑块样式失败。

<swiper class="swiper-container" current="{{detail.currSlideIndex}}" previous-margin="35rpx" next-margin="35rpx" bindchange="swiperChange">
   <swiper-item class="swiper-slide {{index===detail.currChangeIndex? 'active':'other'}}" wx:for="{{detail.slides}}" wx:key="index">
      <image src="{{item}}" mode="aspectFill">image>
   swiper-item>
 swiper>
.swiper-container .swiper-slide{
 width: 570rpx;
 height: 435rpx;
}
.swiper-container .active{
 width: 640rpx;
 height: 480rpx;
}


演示如下：

开发者工具演示

荣耀9演示

上面两张是苹果5演示效果

5 回复

@官方，真机上swiper设置previous-margin表现不一致

我的怎么在测试工具里都不显示呢

没有，

一年多了这 bug 都没修复??? wc…人家 issue 写的比你们文档都还详细…有时间不修复 bug, 尽是瞎改 api …

破案了… swiper-item 里面的元素必须是 display: inline 行内元素, 然而 "微信 ide"这个 user-agent 会自动将 image 的标签加上 display: inline-block.

我也遇到同样的问题，请问解决了吗？

回到顶部