小程序 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="{{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设置为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="{{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

推荐阅读更多精彩内容