uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况

原因:

首先不论是自定义组件还是ui组件,本质上的原因都是微信小程序默认的组件隔离策略导致的。
微信小程序组件隔离文档参考

下面根据不同情况的解决方法:

1.在原有class上修改样式

比如我在uview radio 单选组件的原有class(.u-radio ) ,修改样式出现不生效的情况

.u-radio {
		margin-right: 25px;
	}

解决:
加上 ::v-deep 即可

::v-deep .u-radio {
		margin-right: 25px;
	}

2.增加class

比如我在uview radio 单选组件加了一个新的class (myClass) 出现不生效的情况

.myClass {
		margin-right: 25px;
	}

解决:
在要修改样式的组件内,data 同级的地方加个微信小程序的配置即可

options: {
			styleIsolation: 'shared', // 解除样式隔离
		}

在这里插入图片描述

3.行内样式(可正常生效)

  • 组件内有通过属性接受样式(正常)
  • 直接通过原生style属性更改的情况(正常)
  • 19
    点赞
  • 35
    收藏
    觉得还不错? 一键收藏
  • 12
    评论
UniApp中使用uView UI组件库,如果编译后的代码体积超过2MB,可以尝试以下方法来压缩代码以减小发布后小程序的体积: 1. 移除不必要的组件和功能:检查项目中是否使用了一些不必要的组件或功能,可以考虑移除它们以减小代码体积。 2. 按需引入组件:uView UI提供了按需引入的方式,可以根据项目需要只引入使用到的组件,而不是全部引入。这可以通过修改`uview-ui`文件夹下的`index.js`文件来实现。只需将需要使用的组件注释解开即可。 3. 配置Tree Shaking:通过在`vue.config.js`文件中配置Tree Shaking,可以让Webpack只打包使用到的代码,从而减小最终的代码体积。可以尝试添以下配置: ```javascript module.exports = { // ... configureWebpack: { optimization: { usedExports: true } } } ``` 4. 开启代码压缩和混淆:在发布小程序时,可以选择开启代码压缩和混淆,以减小代码体积。在微信开发者工具中,勾选“详情”下的“压缩代码”和“混淆代码”选项。 5. 使用分包载:如果项目中有多个页面,可以考虑使用分包载的方式,将不同页面的代码分开打包,从而减小每个页面的代码体积。 6. 使用gzip压缩:在服务器上配置gzip压缩,可以进一步减小传输的文件体积。可以与服务器管理员进行沟通,了解如何配置gzip压缩。 通过以上方法,你应该能够减小uView UI组件库在UniApp中的代码体积,使其满足小程序发布要求。
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值