• 欢迎大家分享资料!前往留言板评论即可!

细抠swiper间隙问题

合宙 模组资料网 2年前 (2021-05-15) 670次浏览 0个评论 扫描二维码

官网移动端大致写完后开始抠细节,发现设计师给出了一个swiper—slide加阴影的效果,设计图如下所示:
细抠swiper间隙问题

理所当然的重拳出击,给两端加padding,然后变成了下面这个狗样子……
细抠swiper间隙问题
理所当然的就被设计师驳回了,只能默默找原因和解决办法。
原因很简单,padding加在最外层container上,而swiper组件往里一直到图片,足有7层,虽然padding不会削掉自身的阴影,但是里层盒子会被外层给削掉,造成这种尴尬的断层感,果断把最外层设置为宽度100%。

那要实现间隔效果,直接想到swiper里有一个spaceBetween属性,但是这个属性是给swiper—slide加上margin—right属性,而且单位只有“px”,我写移动端用的是“vw”单位,所以给定值不行;百度说给“auto”值,swiper—slide加margin属性可以解决,实践了一下发现轮播图不能拖动了,果断放弃另找出路。

既然swiper解决不了这个事儿,还是得从padding、margin和width里找方法,直接找到swiper—slide设置宽度和居中,发现阴影位置跑到了小图下方——高度不对,一通改改改之后,不但没达到效果,小图也变形了……另想办法设置盒子绝对定位加阴影,不管怎么加z—index,不是大图不见 就是阴影不见,只能一顿撤回。

最后是把宽度和阴影都加在img上,其余宽度都设为100vw,关闭spaceBetween属性,效果图才出来,写出来之后哭笑不得,明明是最简单的方法却兜转了一大圈,不过好歹效果出来了,虽然最后的解决办法很基础,中间的心路历程还是蛮艰辛的,果然经验还是要慢慢积累,从一次次掉坑爬坑中吸取经验顽强成长吧。。


转载请注明原文链接:细抠swiper间隙问题
喜欢 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址