小程序 swiper 前后边距的使用

淡淡的烟草味﹌ 2022-03-18 21:12 309阅读 0赞

小程序swiper 其中提供了两个属性，previous-margin和next-margin；

previous-margin：前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值；

next-margin：后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值

假设设置 一个view的尺寸为宽为640rpx,高为360rpx，前边距为25rpx,后边距为25rpx,如果此时直接为previous-margin和 next-margin设置为25rpx，看到效果可能不是想要的那样，可能如下

![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;效果就达到了，代码如下

.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][image.png 1]

[image.png]: /images/20220319/7f791494087b467788bc5380ab076c5b.png
[image.png 1]: /images/20220319/07e0037cc64e41a0b7a5cc55f6901033.png