微信小程序前后边距的使用

2021-01-04  本文已影响0人  小栗有以的圈外男友

小程序中的 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

上一篇 下一篇

猜你喜欢

热点阅读