效果图如上:能看到两边的白边。是不是比原生的样式好上很多了啊。
关键代码:previous-margin="24rpx" next-margin="24rpx
<swiper class="swiper" autoplay circular previous-margin="24rpx" next-margin="24rpx">
<swiper-item>
<view class="store">
<image class="logo" src="../../images/index/timg.png"/>
<text>农夫山泉东北大兴安岭旗舰店</text>
<view class="button-wrapper">
<view class="rightNow">进店逛逛</view>
<image class="button" src="../../images/index/button.png"/>
</view>
<view class="images">
<view class="produce-images">
<image src="../../images/index/timg.png" mode="widthFix"/>
<image src="../../images/index/timg.png" mode="widthFix"/>
<image src="../../images/index/timg.png" mode="widthFix"/>
</view>
<image src="../../images/index/more03.png" class="more"/>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="store">
<image class="logo" src="../../images/index/timg.png"/>
<text>农夫山泉东北大兴安岭旗舰店</text>
<view class="button-wrapper">
<view class="rightNow">进店逛逛</view>
<image class="button" src="../../images/index/button.png"/>
</view>
<view class="images">
<view class="produce-images">
<image src="../../images/index/timg.png" mode="widthFix"/>
<image src="../../images/index/timg.png" mode="widthFix"/>
<image src="../../images/index/timg.png" mode="widthFix"/>
</view>
<image src="../../images/index/more03.png" class="more"/>
</view>
</view>
</swiper-item>
<swiper-item>
<view class="store">
<image class="logo" src="../../images/index/timg.png"/>
<text>农夫山泉东北大兴安岭旗舰店</text>
<view class="button-wrapper">
<view class="rightNow">进店逛逛</view>
<image class="button" src="../../images/index/button.png"/>
</view>
<view class="images">
<view class="produce-images">
<image src="../../images/index/timg.png" mode="widthFix"/>
<image src="../../images/index/timg.png" mode="widthFix"/>
<image src="../../images/index/timg.png" mode="widthFix"/>
</view>
<image src="../../images/index/more03.png" class="more"/>
</view>
</view>
</swiper-item>
</swiper>