小程序中的 swiper组件提供了两个属性：next-margin 和 previous-margin;
那么我们可以利用这两个属性来做留白的轮播图
边距指的是后面图片露出来的那部分，最终结果是前后都露出相应的部分，那么我们就需要进行计算来得出正确的数值！
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
网友评论