小程序swiper 其中提供了兩個屬性已卷，previous-margin和next-margin；
previous-margin：前邊距淳蔼，可用于露出前一項的一小部分侧蘸，接受 px 和 rpx 值裁眯；
next-margin：后邊距，可用于露出后一項的一小部分讳癌，接受 px 和 rpx 值
假設(shè)設(shè)置 一個view的尺寸為寬為640rpx,高為360rpx穿稳，前邊距為25rpx,后邊距為25rpx,如果此時直接為previous-margin和 next-margin設(shè)置為25rpx，看到效果可能不是想要的那樣晌坤，可能如下
<swiper previous-margin="25rpx" next-margin="25rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swiper_curPage}}" autoplay="true" circular="true" class="swiper">
<block wx:for="{{list}}" wx:for-item="item" wx:key="{{item.imgUrl+index}}">
<swiper-item class='swiper_item'>
<image src='{{item.imgUrl}}' class="swiper_imge" mode='scaleToFill' data-item="{{item}}" bindtap="swiperItemOnClick"></image>
</swiper-item>
</block>
</swiper>
image.png
此時我們不應該直接為previous-margin和 next-margin設(shè)置為25rpx逢艘，他們值應該重新算，現(xiàn)在我想要達到我上面想要的效果骤菠，應該怎么算呢它改，算法如下：
- 根據(jù)屏幕尺寸寬度為750rpx來計算；
- 確定想要圖片露出的尺寸商乎，假設(shè)為25rpx央拖，圖片顯示寬度為640rpx;
- 屏幕寬度-圖片的寬度，得到兩邊的邊距和鹉戚；
750-640=110 - 將邊距拆成兩部分鲜戒，得到一邊的邊距，用邊距減去露出的尺寸抹凳，得到兩張圖片之間的邊距遏餐； 由于swiper-item的寬度不能改成圖片的大小，只能將盒子圖片居中了却桶，盒子內(nèi)邊距作為空白間隙境输；
110/2-25=30 - 圖片間距 拆成兩部分，分別為圖片的外邊距
30/2=15 - 露出的尺寸 加上 外邊距 就等于前后邊距的值
25+15=40
所以最后我們應該給previous-margin和 next-margin設(shè)置為40rpx颖系；同時注意設(shè)置圖片寬度640rpx;效果就達到了嗅剖，代碼如下
<view class="container">
<swiper previous-margin="40rpx" next-margin="40rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swiper_curPage}}" autoplay="true" circular="true" class="swiper">
<block wx:for="{{list}}" wx:for-item="item" wx:key="{{item.imgUrl+index}}">
<swiper-item class='swiper_item'>
<image src='{{item.imgUrl}}' class="swiper_imge" mode='scaleToFill' data-item="{{item}}" bindtap="swiperItemOnClick"></image>
</swiper-item>
</block>
</swiper>
</view>
.container{
position: relative;
}
.swiper {
width: 100%;
height: 360rpx;
margin: 30rpx 0rpx;
background-color: #FFFFFF;
}
.swiper_item {
height: 360rpx;
display: flex;
justify-content: center;
align-items: center;
}
.swiper_imge {
width: 640rpx;
height: 360rpx;
background-color: #FFFFFF;
border-radius:20px;
}
image.png
