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

小程序中有一個組件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;
}