参考文章:uniapp修改swiper组件下方指示点方法(亲测可用)_今天是一个礼物的博客-CSDN博客_uniapp swiper 去掉指示点

 主要实现这种指示点

 

指示点样式更改:直接加在vue文件中是不生效的

/* #ifdef APP-PLUS */
	uni-swiper .uni-swiper-dot {
		width: 10rpx;
		height: 3rpx;
	}

	uni-swiper .uni-swiper-dot-active {
		background-color: #000;
		width: 40rpx;
		border-radius: 5rpx;
	}

	/* #endif */

	/* #ifdef MP-WEIXIN */
	wx-swiper .wx-swiper-dot {
		width: 10rpx;
		height: 3rpx;
	}

	wx-swiper .wx-swiper-dot-active {
		background-color: #000;
		width: 20rpx;
		border-radius: 5rpx;
	}

	/* #endif */

查阅资料意思是swiper是uni-app的内置组件,不允许修改样式

解决方法:

!!!!!!!!!!!!!!!!!!!直接在app.vue的style中加入即可生效

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐