didi / mand-mobile

💰 A mobile UI toolkit, based on Vue.js 2, designed for financial scenarios.
https://didi.github.io/mand-mobile
Apache License 2.0
3.46k stars 772 forks source link

swiper如何设置swiper-item之间的间距。如何swiper修改指示器样式? #432

Closed cornucopib closed 5 years ago

cornucopib commented 5 years ago

Mand Mobile Version

OS Version & Browser Version

Node Version, Package Management Tool

Recurring Links

Recurring Steps

我使用swiper实现横向轮播图效果,但是设置每个项之间的间距有点问题。还有比如指示器的位置的样式不能调整。

Expectant Behaviors

可以设置swiper中项的间距,设置指示器样式,比如指示器位置等。

Actual Behaviors

不能设置swiper的间距,不能设置指示器的样式。

xxyan0205 commented 5 years ago

指示器位置可通过修改.md-swiper-indicatorswiper-item的间距可以通过其内部的padding控制

cornucopib commented 5 years ago

指示器位置可通过修改.md-swiper-indicatorswiper-item的间距可以通过其内部的padding控制

我试过修改swiper-item的间距,有很多坑。感觉要改源码才行。能出个demo吗?

xxyan0205 commented 5 years ago

修改swiper-item的间距

不要直接修改swiper-item,但是swiper-item内嵌套的内容你是可以自定义的。假如需要swiper-item之间间距20px,在swiper-item添加一个div让其padding: 0 10px

cornucopib commented 5 years ago

修改swiper-item的间距

不要直接修改swiper-item,但是swiper-item内嵌套的内容你是可以自定义的。假如需要swiper-item之间间距20px,在swiper-item添加一个div让其padding: 0 10px

我试了下,swiper-item下的div要用border来处理。padding填充不了颜色,并且width也要减去左右的border才有效。