1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > 微信小程序自定义修改swiper指示点样式

微信小程序自定义修改swiper指示点样式

时间:2024-05-18 16:48:27

相关推荐

微信小程序自定义修改swiper指示点样式

最近要用到微信小程序,于是就以CSDN的CSDN会员小程序作为练手案例,但是当我在使用官方的Swiper组件时发现,官方的指示点和我想要的效果不一致。于是,经过各种找资料,最终发现了解决方法。

官方的效果是这样的,我们可以看到官方的指示点是扁长的。

最后通过设置css样式的方式,成功的解决了样式的问题。

css代码:

/* 轮播图指示点 *//* 指示点位置 */.wx-swiper-dots.wx-swiper-dots-horizontal {position: absolute;right: 0;bottom: 80rpx;}/* 指示点的样式 */.wx-swiper-dots .wx-swiper-dot {width: 30rpx;height: 10rpx;border-radius: 5rpx;}/* 选中指示点的样式 */.swiper .wx-swiper-dot.wx-swiper-dot-active {width: 50rpx;border-radius: 15rpx;}

随便吐个槽:微信的组件文档能像Ant Design和elementUI一样将组件的参数与函数分开就好了。

而且微信小程序的组件样式没有办法直接在微信开发者工具看到。就比如,我这个Swiper的指示点一样,完全无法在开发者工具中查看到他的指示点怎么写的。

当然以上只是建议。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。