小程序-解决原生组件层级太高的问题

最新推荐文章于 2024-07-23 10:55:06 发布
最新推荐文章于 2024-07-23 10:55:06 发布
阅读量6.4k 收藏
点赞数
分类专栏： 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43292447/article/details/83415617
版权
本文探讨了在微信小程序中遇到原生组件层级过高的问题，并提出通过使用自定义组件来覆盖原生组件，实现视觉效果的调整。详细解决方案及线上代码示例可在码云平台查看。
摘要由CSDN通过智能技术生成

使用来写要覆盖在原生组件上面的元素
码云线上代码：https://gitee.com/vuezhen/wechat

wxml页面：
<view class="invitation">
	<view class="head">
		<view class="empty"></view>
		<view class="top"></view>
		<view class="img">
			<image class="_img data-v-254134ae" data-comkey="0" data-eventid="0" mode="aspectFit" src="img/1.png"></image>	
		</view>
	</view>
	<view class="_div data-v-254134ae info">
		<view class="_div data-v-254134ae title">
			<view class="_p data-v-254134ae">您已邀请好友</view>
			<view class="_p data-v-254134ae">
				<label class="_span data-v-254134ae red">100</label>
				位
			</view>
		</view>
		<view class="_ul data-v-254134ae list" >
			<view class
最低0.47元/天 解锁文章
倾听雨落~
关注
专栏目录
uniapp|原生控件层级过高无法覆盖的解决方案
前端程序员、项目经理、人工智能博主
06-25 1万+
简称nview，它是一个原生的类画布的控件，其实cover-view也是用plus.nativeObj.view封装的。这种方式被称为混合渲染。另外cover-view无论如何都无法解决原生导航栏、tabbar、web-view组件的覆盖，为此App端补充了2个层级覆盖方案plus.nativeObj.view和subNVue。但如果在pages.json里注册了原生导航栏和tabbar，nvue里的界面元素默认也无法覆盖这些，也需要plus.nativeObj.view或subNVue。
微信小程序textarea层级过高的解决方法
10-17
主要给大家介绍了关于微信小程序textarea层级过高问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
微信小程序--input,textarea等原生组件层级太高穿透覆盖在其它元素之上解决方案
qq_41822157的博客
06-25 2048
input,textarea都是原生组件，层级高到用z-index都无法改变。在底部有固定按钮的时候，滑动后input和textarea的placeholder和value值都会显示在固定按钮上面，如下图 布局如下 <view class="actionbox flex"> <view class="action_left" bindtap="openCancelModel">取消订单</view> <view class="act
解决uniapp打包微信小程序时，使用canvas层级过高问题解决踩坑过程
最新发布
qq_28245087的博客
07-23 424
我们只需要将画好的canvas转换成图片，然后使用图片来展示，这样就很容易控制canvas的层级了。很明显在做地区选择时，canvas画的内容层级太高影响了美观的操作。那么如何解决这个问题呢。由于微信中canvas的层级设置的非常高，我们想人为的去控制他有一定的难度。4）解决后的图片展示。
【微信小程序】小程序原生组件层级太高问题解决
Z_kenshou的博客
10-17 2396
这两天写小程序我写的是自定义顶部导航栏，再一次写原生组件textarea（多行输入框）的时候发现原生的层级太高，我在顶部导航设置多少‘z-index：999+’ 都不行研究了一波供大家参考一下 发生层级高的地方： ...
微信小程序video层级过高解决办法
weixin_48399505的博客
12-08 922
video、cover-view
微信小程序echart图表canvas层级太高覆盖解决办法
天天打码-16年老码农
04-25 2152
最近在使用echart图表时，发现滚动页面时，echart图表层级覆盖原生组件，设置z-index无效。发现原来的echarts-for-wx组件里有个方法。
一步快速解决微信小程序中textarea层级太高遮挡其他组件
01-20
`cover-view`是专为了解决原生组件层级过高而设计的，它可以覆盖在原生组件之上，包括textarea。与一般的原生组件不同，`cover-view`和与其类似的`cover-image`组件允许开发者在原生组件之上添加交互元素，如按钮、...
【工作记录】解决微信小程序原生组件textarea因层级过高导致穿透其他元素问题
零信号的博客
07-26 678
工作需求是这样的，这是一个产品点评页，有一个产品下拉选择框，当点击下拉按钮时，会有一个下拉弹框覆盖在编辑框之上。
踩坑之路——微信小程序video原生组件层级过高解决方案
weixin_42556039的博客
10-30 4013
成品：   可以看到成品其实不是完全解决了问题，如果有更好的方法可以告知一下我，谢谢。 思路很简单，让video组件在不播放的时候隐藏，让替代品view呈现，当点击view时，让video显示出来。 我写了一个小组件供大家参考： wxml &lt;view class='view' style='{{style}};' bindtap='showVideo' hidden='{{sh...
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
01-03
前言：这篇文章讲什么 微信小程序中 textarea 组件的层级过高如何解决 前言：这篇文章对谁有用 微信小程序开发者 前言：本文有什么用？ 提供解决问题的思路，供你参考 （因为时间关系，我没法把代码整理的好好的然后贴出来让你复制黏贴。或者是做成一个组件然后开源） 前言：本文时效性 截止至2018年10月30号，微信的 textarea 还是以原生组件形式实现，因此层级最高。无法通过 z-index 进行调整。在微信小程序官方把 textarea 改成了可以控制层级之前。本文中的内容会一直有效。 1. 问题描述 根据官方文档，textarea 是原生组件 (https://deve
小程序中textarea层级最高的结局办法
qq_42329594的博客
12-25 2017
在小程序中textarea层级比较高，当底部有fiexd定位的时候或出现文本框中的文本穿透显示出来，解决办法是在texarea标签下面添加一个view或者text标签来和texarea标签替换使用   &lt;view class='textarea_wrap'&gt; &lt;textarea class='resource-textarea' wx:i...
微信小程序中层级问题
weixin_45581741的博客
06-05 1782
微信小程序中层级问题 小程序框架为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，为了能正常覆盖原生组件，设计了cover-view，cover-view会覆盖在组件之上，这样就可以解决原生组件层级的问题。 这就是顶部的一个标题组件，这样写他不会出现层级问题 <template> <cover-view class="child-header"> <cover-view class="
微信小程序——自定义底部tabBar
每天都要努力学习哦~~
05-10 1万+
》如果在选择点击切换按钮时，页面没根据tabBar进行切换，问题很可能能在custom-tab-bar目录的index.js 的list数据配置的页面路径，一定要。由于canvas组件是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。第一步骤中的custom设置为true，小程序就可以自动读取该目录下的index组件，把该组件当做tab渲染出来。这两个组件也是原生组件，但是使用限制与其他原生组件有所不同。此时，通过点击切换页面，就可以实现。
解决微信小程序tabBar自定义弹窗遮挡不住
小陈的博客
02-07 5863
这个方法就是完全放弃微信官方的tabbar；自己用SPA的方式去实现一个tabbar;这个方法的优点tabbar能自己定制化；顺手也解决了盖不住的问题；缺点在于：要自己实现微信官方的实现的功能比如wx.switchTab等基础功能需要自己实现路由管理需要比较大测试成本整体实现成本还是比较大的，具体实现方法这里不做演示，感兴趣的可以自行找相关的文章；社区有许多这个文章。
微信小程序中WebView中原生组件限制问题解析
weixin_34007291的博客
09-14 3333
背景 在微信的文档中有一个章节说明了『 原生组件的使用限制 』有这么一段话 『由于原生组件脱离在 WebView 渲染流程外，因此在使用时有以下限制： 原生组件的层级是最高的，所以页面中的其他组件无论设置 z-index 为多少，都无法盖在原生组件上。 后插入的原生组件可以覆盖之前的原生组件。 原生组件还无法在 scroll-view、...
微信小程序tabBar显示问题
热门推荐
u013401913的博客
10-25 1万+
在微信小程序的开发中，我遇到疑惑如下： 在app.json中定义了多个pages,一般微信小程序启动的时候，自动加载pages下的第一个页面， "pages": [                 "pages/index/index",             "pages/main/main",       "pages/you/you",       "pages/me/m
微信小程序 web-view 开发采坑大全
huangpb的博客
01-26 7660
前言 原来小程序里的webView又这么多注意点。今日早读文章由腾讯imweb@结一投稿分享。 正文从这开始～～ 对于开发者来说，如果 H5 页面能够直接嵌入到小程序那是再好不过了，而 web-view 组件正好就提供了这么个功能（个人类型与海外类型的小程序暂不支持使用）。简单来说它是一个可以用来承载网页的容器，会自动铺满整个小程序页面。 虽然这带来了很大的便利，但是也还是有很多需要注意的地...
小程序原生组件：运行机制与应用详解
在现代微信小程序开发中，原生组件占据着独特地位，它们并非完全...此外，为了方便理解，书中提到的小程序组件通常采用英文标签。最后，读者应密切关注官方文档，因为小程序的环境和组件API随微信版本更新而不断演变。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值