微信小程序自定义修改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的指示点一样，完全无法在开发者工具中查看到他的指示点怎么写的。
当然以上只是建议。
北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台
更多推荐
2
0- 0
已为社区贡献4条内容
所有评论(0)