微信小程序swiper前后边距的使用

微信小程序swiper前后边距的使用

小程序有一个滑动视图容器swiper提供了两个属性：

（1）previous-margin：前边距，可用于露出前一项的一小部分，支持px和rpx
（2）next-margin：后边距，可用于露出后一项的一小部分，支持px和rpx
假如需要做一个效果，如下图所示，图片左右滑动，每次滑动都居中显示。


注：1.图片的宽度不能和swiper-item的宽度一致，否则不生效
2.想要图片居中滑动，需要设置前后间距一致
1.确认想要显示的图片的宽度是610rpx，而屏幕的总宽度是750rpx
2.屏幕总宽度-图片宽度：750-610=140rpx(显示一张图剩下的屏幕宽度)
3.确定两张图片之间的间距，假设为10rpx
4.将屏幕剩余宽度均分，减去两张图之间的间距
140➗2-10=60rpx
60rpx就是前后间距
代码如下

<swiper class="swiper-container swiper2" previous-margin="60rpx" next-margin="60rpx">
   <block s-for="item, index in answer" s-key="unique">
   	<swiper-item>
   		<view class="swiper-item">
   				<image src="{{imgs[index]['src']}}"></image>
               <view class="swiper2-title">
                   {{item.title}}
               </view>
   		</view>
   	</swiper-item>
   </block>
</swiper>

.swiper-container {
   height: 360rpx;
}
.swiper-item {
   width: 610rpx;
   font-size: 36rpx;
}
.swiper2 .swiper-item{
   position: relative;
}
.swiper2 .swiper-item image{
   border-radius: 16rpx;
}
.swiper-item image {
   width: 100%;
   height: 340rpx;
}
.swiper2-title {
   position: absolute;
   width: 100%;
   background-image: linear-gradient(
       -180deg,
       rgba(0, 0, 0, 0) 3%,
       rgba(0, 0, 0, 0.5) 100%
   );
   padding-left: 20rpx;
   height: 76rpx;
   line-height: 76rpx;
   font-size: 32rpx;
   background: rgba(51,51,51,0.5);
   border-radius: 0 0 16rpx 16rpx;
   bottom: 10rpx;
   color: #fff;
   box-sizing: border-box;
}