uniapp设置的组件样式在H5和APP中生效，在微信小程序中不生效问题解决

已于 2022-03-03 17:10:00 修改
阅读量1.2w 收藏 8
点赞数 6
分类专栏： uni-app 文章标签： 微信小程序 uni-app
于 2022-02-28 11:20:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lingliu0824/article/details/123178465
版权

问题：想修改uview组件库中组件的样式，想通过深度选择器>>>(/deep/)的方式修改，修改后在H5和APP上都正常生效，但在小程序中看不到设置的样式。
解决：
1.需要先在使用自定义组件的组件/页面中添加与data同级的options属性，设置options:{styleIsolation: ‘shared’}
2.如果还是不生效，查看是否是优先级不够高，通过添加父选择器增高优先级，或者在样式后面加上!important(不推荐，容易影响其他页面样式)
在这里插入图片描述

小玲子小玲子
关注
专栏目录
uni-app上自定义微信小程序的tabbar
liuye066的专栏
07-26 3757
今天用uni-app开发微信小程序时，修改tabbar的样式无效，如selectedColor, iconWidth等，明明官网上都有这些属性，但在模拟器上就是没有效果。自定义tabbar1、在微信官网，自定义tabbar的页面，下载自定义tabbar示例代码；将其中的custom-tab-bar目录整个拷贝到项目根目录下；2、修改custom-tab-bar/index.js的文件，路径都改为自己uni-app项目下的页面路径和图片路径 3、pages.json文件tabbar配置：设置"custom
uniAPP小程序 子组件使用watch不生效，H5正常，小程序不正常（其实是子组件model选项的问题）
Start2019
11-07 4537
model 对象中，prop：'value’ 需要跟 event：'input' 搭配，如果双向绑定的事件没有用到 input， 那么 双向绑定的值 不应该命名为 'value'
uniapp开发中遇到自定义组件样式在h5中生效，在小程序中不生效的情况
最新发布
qq_44919431的博客
09-14 369
isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。
解决 uniapp 修改uview样式，h5端生效，在微信小程序不生效。
tieniuya的博客
07-07 3011
【代码】解决 uniapp 修改uview样式，h5端生效，在微信小程序不生效。
uni-app运行到H5正常，但运行到小程序不正常、报错总结
菜菜的博客
09-01 8325
1.v-for中，非 h5 平台 :key 不支持表达式 index+'_' 同级多个 v-for 时 key 的值是不允许重复的，key 的绑定是不支持表达式的，需要按照以下方式处理。 // 错误的写法 <view v-for="(item, index) in list1" :key="index">{{item}}</view> <view v-for="(it...
uniapp 给自定义组件或uview等ui组件加class样式或修改样式在微信小程序不生效的情况
热门推荐
qq_39879542的博客
10-19 2万+
uniapp微信小程序样式问题
[uniapp/wx小程序] 给自定义组件或ui组件加样式在wx小程序不生效
jinwenshuo2007的博客
08-20 545
不论是自定义组件还是ui组件，本质上都是因为微信小程序的。和data/methods同级，增加该配置，）和标签名选择器，请改用class选择器。组件和引用组件的页面不能使用id选择器（另外，组件内不能使用id选择器。首先检查选择器的问题，
关于uniapp运行到小程序后组件上面的自定义样式无效的问题
顾风的博客
07-06 1072
关于uniapp组件样式运行到小程序失效问题
微信小程序webview与h5通过postMessage实现实时通讯的实现
10-16
根据官方文档，H5页面向小程序发送的`postMessage`消息，只有在小程序后退、组件销毁或用户分享时才会被接收到，且接收到的消息是所有`postMessage`参数组成的数组。 针对这些限制，文章提出了两种策略来实现实时...
uniapp开发app项目适配微信小程序问题总结
cielzy的博客
03-13 793
uniapp开发app项目适配微信小程序问题总结
微信小程序—setTimeOut定时器的坑
03-29
实验室需要将项目的app搬到微信的小程序上，终于知道为什么程序员是手艺人了，只要有需求，就要想方设法去填充这种需求，去年是小程序的元年了可以说，去年冬天一个叫跳一跳的小程序游戏出现在我的微信中，当时就...
uniapp判断当前运行环境 app h5 微信小程序 百度小程序
weixin_47873655的博客
05-21 1万+
hbuilderX最新版本现在已经支持在代码中获取当前所处环境 仅3.4.10+版本以上才支持，如果您的hbuilderX版本不是这个版本的需要先升级一下版本 hbuilderx下载 选择3.4.11及以上版本 const type = uni.getSystemInfoSync().uniPlatform console.log(type) // app uniPlatform 可取值如下： 值 生效条件 app App web H5 mp-weixin 微信小程序 mp-
uniapp开发微信小程序，自定义组件无法修改uniui样式
weixin_46954302的博客
10-27 658
uniui修改样式
uniapp 组件样式在微信小程序中失效
mekave的博客
11-13 1万+
问题描述： 本人使用uniapp组件，直接在组件上加的样式info_checked和info_unchecked在H5中正常，打包到微信小程序，发现样式丢失。 由于本人非美学专业毕业，且是直男一枚，页面设计丑不可闻，见谅。 代码 <view class="cu-list menu-avatar"> <uni-section title="当日就诊患者" type="line"></uni-section> <uni-list v-for="(item, in
uniapp中app真机模拟以及小程序编译后css样式异常失效问题原因及解决方案
weixin_45745641的博客
01-01 1万+
最近写使用uniapp写app，开发的时候写样式都是使用浏览器h5进行调试一切正常，但是最后进行手机真机调试的时候css样式出现了异常，本文归纳常见的问题比如在h5页面显示正常：但是在真机调试app的实现则显示：vue页面在App端的渲染引擎默认是系统webview（不是手机自带浏览器，是rom的webview），在较老的手机上，比如Android4.4、5.0或iOS8，一些新出的css语法是不支持的。注意这不意味着不能使用flex，Android4.4也支持flex，只是不要使用太新的css。可以找An
uniapp微信小程序修改组件样式失效（解决方案）
weixin_53524596的博客
05-22 2558
uniapp修改微信小程序组件样式失效（解决方案）
解决uniapp修改内置组件样式，在微信中不生效问题
小二来一只葫芦
04-26 1448
解决uniapp修改内置组件样式，在微信中不生效问题
关于 uniapp 中，自定义的icon不显示
qq_40652539的博客
06-13 3332
在开发 时，需要引入 中的我们自己的字体图标库时，我按照以往在 中的引入方法并结合 官方提供的步骤，一步一步走下来，结果发现字体图标不显示，而且需要修改的文件地址也是正确的，通过查看元素样式，发现字体类已经生效，于是我打开本地的浏览器再看，发现在本地浏览器下，自定的图标库是可以显示的，但是在 内置浏览器下不显示； 这就怪了… 于是我就不再使用我们自己的字体，而是按照官方的步骤，从添加开始，到自己创建项目，一步一步，一步一步…最终引入到项目中去，竟然发现，在内置浏览器下是可以正常显示的； 经过这次的引入，我从
uniapp 微信小程序嵌套H5细节
08-07
uniApp是一款基于Vue.js的跨平台框架，它可以用于快速开发微信小程序、H5页面以及Android和iOS原生应用...5. **权限管理**：H5无法访问小程序的所有API，特别是涉及用户身份验证和敏感信息的操作，必须在小程序端进行。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值