解决uniapp修改内置组件样式,在微信中不生效问题

下面是作者在开发工作中遇到的问题,踩坑几小时最后解决的办法。

接下来以UNIAPP文档中的内置组件 slider 为例

接下来直接上样式代码:

<style lang="scss" scoped>
	::v-deep .wx-slider-wrapper {
		height: 100% !important;
	}

	::v-deep .wx-slider-tap-area {
		height: 100% !important;
	}

	::v-deep .wx-slider-handle-wrapper {
		height: 100% !important;
	}


	::v-deep .wx-slider-handle {
		height: 38px !important;
		width: 38px !important;
		margin: 0 !important;
		top: 0 !important;
		border-radius: 5px !important;
	}

	::v-deep .wx-slider-thumb {
		height: 38px !important;
		width: 38px !important;
		margin: 0 !important;
		top: 0 !important;
		border-radius: 5px !important;
		background-color: red !important;
	}

	::v-deep .wx-slider-track {
		background-color: #F53C3C !important;
		border-radius: 0px !important;
	}
	
	::v-deep .uni-slider-wrapper {
		height: 100% !important;
	}
	
	::v-deep .uni-slider-tap-area {
		height: 100% !important;
	}
	
	::v-deep .uni-slider-handle-wrapper {
		height: 100% !important;
	}
	
	
	::v-deep .uni-slider-handle {
		height: 38px !important;
		width: 38px !important;
		margin: 0 !important;
		top: 0 !important;
		border-radius: 5px !important;
	}
	
	::v-deep .uni-slider-thumb {
		height: 38px !important;
		width: 38px !important;
		margin: 0 !important;
		top: 0 !important;
		border-radius: 5px !important;
		background-color: red !important;
	}
	
	::v-deep .uni-slider-track {
		background-color: #F53C3C !important;
		border-radius: 0px !important;
	}
</style>

经过各种实践,发现微信小程序上的组件样式是以   .wx-   开头的,而uniapp是以   .uni-    开头,

所以这里我们选择一起修改保持Hbuilder和微信开发者工具里面的样式保持一致。

至此问题得到完美解决。

最近更新

  1. TCP协议是安全的吗?

    2024-04-27 09:50:03       16 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-04-27 09:50:03       16 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-04-27 09:50:03       15 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-04-27 09:50:03       18 阅读

热门阅读

  1. Spring Boot项目中按天分割日志的实践

    2024-04-27 09:50:03       18 阅读
  2. SpringBoot这29个注解你都用到过么

    2024-04-27 09:50:03       18 阅读
  3. 慢生活,慢光阴

    2024-04-27 09:50:03       12 阅读
  4. PyTorch的基本概念及使用场景

    2024-04-27 09:50:03       14 阅读
  5. MAC系统升级问题记录

    2024-04-27 09:50:03       14 阅读
  6. 五一节前的信息系统的安全保障工作

    2024-04-27 09:50:03       13 阅读
  7. springmvc

    springmvc

    2024-04-27 09:50:03      22 阅读
  8. Git常用命令大全

    2024-04-27 09:50:03       12 阅读
  9. Oracle时间函数

    2024-04-27 09:50:03       35 阅读