uniapp 开发微信小程序 样式穿透问题解决

最新推荐文章于 2024-05-12 23:20:10 发布
最新推荐文章于 2024-05-12 23:20:10 发布
阅读量1.7k 收藏 1
点赞数 1
文章标签： 微信小程序 uni-app 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35388369/article/details/130523470
版权

微信文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/wxml-wxss.html#%E7%BB%84%E4%BB%B6%E6%A0%B7%E5%BC%8F%E9%9A%94%E7%A6%BB
问题：父组件中修改子组件 /deep/ H5中生效，但是在微信小程序不生效。
解决：在script中添加styleIsolation: ‘shared’，即可解决
如图：
在这里插入图片描述

LZhang-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
uniapp开发微信小程序-人脸采集功能
05-16
uniapp开发微信小程序-人脸采集功能
解决小程序原生组件层级穿透问题
qq_43583887的博客
07-28 1282
自定义组件嵌套 cover-view 时，自定义组件的 slot 及其父节点暂不支持通过 wx:if 控制显隐，否则会导致 cover-view 不显示。cover-view内只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。这时，最好的办法是在弹窗的时候，隐藏canvas层，也就是给他加一个属性，通过改变属性值来隐藏。只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。
微信小程序 - 解决弹框遮罩层的滚动穿透问题
qinnzheng
09-16 4992
小程序穿透
uniapp引用第三方组件样式无法穿透
最新发布
qq_43474235的博客
05-12 585
在通过uniapp编写小程序过程中发现，引用第三方组件库的样式无法穿透修改。微信小程序文档也给出对应的解决思路。
微信小程序一些小坑
weixin_46121939的博客
02-06 972
微信小程序的那些奇奇怪怪的问题
微信小程序滚动穿透问题
Hassan的小博客!
02-10 4179
微信小程序滚动穿透
解决微信小程序中自定义组件样式穿透失效问题
weixin_43109722的博客
04-26 460
微信小程序中，修改组件样式存在一定的限制，有时候使用样式穿透会失效。在A页面中使用:deep修改B组件样式，这样修改是没有问题的。A页面中有C组件（自定义组件），C组件中有UI组件。在C组件中使用样式穿透方法修改UI组件，样式不生效。
小程序中修改UI组件样式失效，在子组件中修改样式失效，样式穿透失效
qbbhgn的博客
01-19 862
微信小程序中的样式穿透是指在组件内部修改父组件的样式。然而，微信小程序的样式规则是有作用域限制的，组件内部的样式只对当前组件生效，无法直接修改父组件的样式。
uniapp写微信小程序，获取openId、unionId总结
06-18
用于解密unionId的js包，使用前需 npm install crypto
uniapp,微信小程序中使用 MQTT的问题
10-15
在开发基于uniapp的微信小程序时，集成MQTT通信可能会遇到一些挑战。本文将深入探讨这些问题及其解决方案，以便为开发者提供宝贵的参考。 首先，MQTT（Message Queuing Telemetry Transport）是一种轻量级的发布/...
uniapp/微信小程序/h5三级地址选择器地区数据
04-14
开发uniapp时，vant组件库中的地址需要自己加，所以就自己封装了一个地址data，使用方法可移步H5开发记录帖
uniapp 微信小程序tabbar凸起的显示
08-25
uniapp 微信小程序tabbar凸起的显示，不闪烁。
uniapp微信小程序使用Echarts组件
07-28
uniapp微信小程序使用Echarts组件,使用实例 <echarts class="uni-ec-canvas" ref="echarts2" :option="option" canvasId="echarts1" id='echarts2'></echarts>
uniapp转微信小程序mqtt可用完整代码示例-解决整机调试网络不通问题
04-26
内置条件编译根据不同的平台选择host以及端口，请注意ws对应wx，wss对应wxs，一定要搞明白，在测试建议通过自己的服务器，不要去用公共服务器问题太多
基于uniapp的微信读书商城小程序源码.zip
06-06
基于uniapp的微信读书商城小程序源码.zip
uniapp微信小程序上传oss的javascript文件下载
05-15
uniapp微信小程序上传oss的javascript文件下载
解决微信小程序自定义弹窗滚动穿透问题
记录本人工作中遇到的问题、经验总结以及分享。
05-31 4385
在小程序页面里有自定义弹窗时候，发现弹窗外滚动的时候，底部背景页面也会跟随滚动。垂直滚动，并将scroll-view的高度设置为屏幕高度，这样就可以实现弹窗自身内容滚动时，而底层内容不滚动。当出现弹窗时，为wxml最外层元素动态添加fixed类。如果你的弹窗本身是不需要滚动的，用这个方法是极佳的。但是这种方式会导致页面自动回到顶部。可以实现弹框背景不滚动，但是。也会导致弹框自身无法滚动。
如何彻底解决微信小程序滚动穿透问题
qq_31699019的博客
03-02 3051
前言：我们在开发业务的过程中总会有各种样式的弹窗需求，在弹窗弹起来的时候，底部的内容却可以滚动，刚开始我们使用catchtouchmove解决了，但是在复杂一点的情况下还是会导致滚动穿透。今天分享一个永久解决该问题的方法。 使用官方的page-meta组件，这里贴下官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/page-meta.html 通过该组件我们可以直接操作Page组件 ，我们给它的wxss样式overflow动态设置
微信小程序中 Vant DropdownMenu 下拉菜单组件穿透问题
欲变世界，先变其身
05-19 4777
在微信小程序中使用DropdownMenu下拉菜单组件时，会发现内容部分滚动到底时，继续划动会导致底层页面的滚动，这就是滚动穿透。
uniapp 微信小程序 css翻页效果
07-11
在 Uniapp 中，可以使用 CSS3 的动画效果来实现翻页效果。下面是一个示例代码，演示如何在微信小程序中使用 CSS 实现翻页效果： ```html <template> <view class="container"> <view class="page" :class="{ active: currentPage === 1 }">Page 1</view> <view class="page" :class="{ active: currentPage === 2 }">Page 2</view> <view class="page" :class="{ active: currentPage === 3 }">Page 3</view> </view> </template> <style> .container { width: 100%; height: 100%; display: flex; flex-direction: row; overflow: hidden; } .page { width: 100%; height: 100%; transition: transform 0.5s ease-in-out; transform: translateX(100%); } .page.active { transform: translateX(0); } </style> <script> export default { data() { return { currentPage: 1 }; } }; </script> ``` 在上面的代码中，我们使用了一个容器 `.container` 来包含三个页面，每个页面都有一个类名为 `.page`。通过给不同的页面添加 `.active` 类，可以控制页面的显示和隐藏。 在 CSS 中，我们使用 `transform` 属性来实现页面的平移效果。通过修改每个页面的 `transform` 属性值，可以控制页面的位置，从而实现翻页的效果。 通过修改 `currentPage` 数据的值，可以切换不同的页面。例如，设置 `currentPage` 为 1，显示第一个页面；设置为 2，显示第二个页面。 希望能帮到你！如有任何问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值