⼩程序swiper前后边距的使⽤
⼩程序swiper 其中提供了两个属性，previous-margin和next-margin；
previous-margin：前边距，可⽤于露出前⼀项的⼀⼩部分，接受 px 和 rpx 值；
next-margin：后边距，可⽤于露出后⼀项的⼀⼩部分，接受 px 和 rpx 值
假设设置 ⼀个view的尺⼨为宽为640rpx,⾼为360rpx，前边距为25rpx，后边距为25rpx，如果此时直接为previous-margin和 next-margin设置为25rpx，看到效果可能不是想要的那样，可能如下
<swiper previous-margin="25rpx" next-margin="25rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swip er_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>
此时我们不应该直接为previous-margin和 next-margin设置为25rpx，他们值应该重新算，现在我想要达到我上⾯想要的效果，应该怎么算呢，算法如下：
1. 根据屏幕尺⼨宽度为750rpx来计算；
2. 确定想要图⽚露出的尺⼨，假设为25rpx，图⽚显⽰宽度为640rpx;
3. 屏幕宽度-图⽚的宽度，得到两边的边距和；
750-640=110
4. 将边距拆成两部分，得到⼀边的边距，⽤边距减去露出的尺⼨，得到两张图⽚之间的边距； 由于swiper-item的宽度不能改成图⽚的
⼤⼩，只能将盒⼦图⽚居中了，盒⼦内边距作为空⽩间隙；
110/2-25=30
5. 图⽚间距 拆成两部分，分别为图⽚的外边距
30/2=15
6. 露出的尺⼨ 加上 外边距 就等于前后边距的值
　25+15=40
所以最后我们应该给previous-margin和 next-margin设置为40rpx；同时注意设置图⽚宽度640rpx；效果就达到了，代码如下
<view class="container">
<swiper previous-margin="40rpx" next-margin="40rpx" bindchange="swiperBindchange" indicator-dots="true" indicator-color="#FFFFFF" current="{{swip er_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;
margin属性怎么用
display: flex;
justify-content: center;
align-items: center;
}
.swiper_imge {
width: 640rpx;
height: 360rpx;
background-color: #FFFFFF;  border-radius:20px;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。