微信小程序(原生) - 修改自定义组件样式
修改自定义组件样式
相信很多初次接触小程序开发的盆友都遇到过这个问题,那就是引入自定义组件时无法覆盖其原有的样式,本文将详细介绍如何修改自定义组件样式。
需求场景:
原组件如图1-1所示,在引用页面中需要修改数字的颜色和单位的字号大小,
修改后的组件如图1-2所示。
图1-1.jpg
图1-2.jpg
解决思路:
在组件的js文件中将wxml中需要修改的标签class暴露出来,然后在引用组件时对暴露出的class进行class覆盖。
具体步骤:
1.找到需要修改的标签
<!-- 通过对组件的观察,我们需要覆盖的标签的class分别为 number,unit -->
<view class='horizontal-list'>
<view><text class='number'>{{leftNum}}</text><text class='unit'>{{leftUnit}}</text></view>
<view class='des'>{{leftTitle}}</view>
</view>
2.在组件的js文件中将这两个class暴露
Component({
externalClasses: ['number','unit'],
})
3.在引用页面引用该组件时对暴露出的class进行覆盖
<horizontalList number='newnumber' unit='newunit'></horizontalList>
4.在wxss文件中添加需要修改的样式
.newnumber {
font-size: 52rpx;
font-weight: bold;
color: red;
line-height: 52rpx;
}
.newunit {
font-size: 40rpx;
}
*** 在使用组件的页面中定义样式(自定义样式与组件内部样式优先级不确定,为了确保自定义样式生效,使用了!important)***
本文是转载记录:大家可以查看作者:https://www.jianshu.com/p/8c35af7a7f6a,笔记类转载。
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 找不到素材资源介绍文章里的示例图片?
- 模板不会安装或需要功能定制以及二次开发?
发表评论
还没有评论,快来抢沙发吧!