如何调整uniapp轮播图swiper的样式(dot的样式和位置)

背景

官网文档不解释很多,这里我来详细说明下,很简单可以做到任意修改自己想要的效果。

需求

我们需要做一个轮播图,其他没什么但是dot的位置要偏上一些,而且样式有要求。
如何调整uniapp轮播图swiper的样式(dot的样式和位置)_第1张图片

实现

利用uniapp官网的demo组件uni-swiper-dot,这个组件可以只用几行代码实现想要的效果,代码如下






修改dot的距离底部的位置

增加一个bottom,默认值是10,这里我修改为了100(根据需要),dot的位置就上移了。

dotsStyles: {
						backgroundColor: 'rgba(83, 200, 249,0.3)',
						border: '1px rgba(83, 200, 249,0.3) solid',
						color: '#fff',
						selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
						selectedBorder: '1px rgba(83, 200, 249,0.9) solid',
						bottom:100
					}

修改dot的样式

修改data里的mode,这里默认四种样式 default,long,nav,indexes,可以参考官方示例,如果还不满意,就自己修改就好了。

总结

通过这个组件可以节省不少时间,希望对大家有用

https://ext.dcloud.net.cn/plugin?id=284

你可能感兴趣的:(uni-app)