微信小程序swiper 前后边距的使用-----previous-margin和next-margin的使用

小程序里经常使用swiper组件来实现轮播滑动的效果。但是有时候我们需要露出前一张和后一张图片一部分,我们可以使用previous-margin和next-margin属性。
  previous-margin:前边距,可用于露出前一项的一小部分
  next-margin:后边距,可用于露出后一项的一小部分
假设设置 一个图片的尺寸为宽为600rpx,高为600rpx,前一张图片露出为20rpx,后一张图片露出为20rpx。这里使用的ip6的屏幕尺寸,宽为750rpx (rpx单位:可以根据屏幕宽度进行自适应)。
1、用屏幕宽度-图片的宽度,得到两边的边距和
750-666=84rpx
2、.将边距拆成两部分,得到一边的边距,用边距减去露出的尺寸,得到两张图片之间的边距
84/2-20=22rpx
3、图片间距 拆成两部分,分别为图片的外边距
22/2=11rpx
4、露出的尺寸 加上 外边距 就等于前后边距previous-margin和next-margin的值
11+20=31rpx
注意:swiper-item的宽度不能改成图片的大小微信小程序swiper 前后边距的使用-----previous-margin和next-margin的使用_第1张图片

你可能感兴趣的:(小程序)