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

Posted 2021-01-16 白色发箍的你

小程序中有一个组件swiper 就是滑块视图容器

其中提供了两个属性

　　previous-margin：前边距，可用于露出前一项的一小部分

　　      next-margin：后边距，可用于露出后一项的一小部分

假设设置 一个view的尺寸为宽为600rpx,高为600rpx，前边距为30rpx,后边距为30rpx,最终呈现结果是这样的

图一和图二

　   　 　

图三

　这是将图片尺寸设置跟屏幕宽一样的尺寸，然后就没有之间的空白间隙了，所有得为图片加上空白间距

　

 

但这并不是想要的结果，其实边距指的是后面那张图片露出来的那部分，最终结果是前后都露出相应的部分

1.确定想要图片露出的尺寸，假设为50rpx，并设置好当前图片的宽度500rpx

2.这里使用的ip6的屏幕尺寸，宽为750rpx (rpx单位：可以根据屏幕宽度进行自适应), 用屏幕宽度-图片的宽度，得到两边的边距和

　　750-500=250

3.将边距拆成两部分，得到一边的边距，用边距减去露出的尺寸，得到两张图片之间的边距

 　　250/2-50=75

4.如图三，如果设置成一样的大小，边距就空不出来了，所以得为图片设置合适的大小，默认是改变图片盒子的宽度，但swiper-item的宽度不能改成图片的大小，只能将盒子图片居中了，盒子内边距作为空白间隙

5.图片间距 拆成两部分，分别为图片的外边距

　　75/2=37.5

6.露出的尺寸 加上 外边距 就等于前后边距的值

　　37.5+50=87.5

 

结果如图

 　　　　　　   

 

 

<swiper class=\'swiper\' previous-margin=\'87.5rpx\' next-margin=\'87.5rpx\'>
  <swiper-item class=\'back center\' wx:for=\'{{img_list}}\'>
    <image class=\'back\' src=\'{{item}}\'></image>
  </swiper-item>
</swiper>

.swiper{
   height: 600rpx;
}

.back{
  width: 500rpx;
  height: 600rpx;
  border-radius: 10rpx;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}