小程序中textarea层级过高穿透问题怎么解决

这篇文章主要介绍“小程序中textarea层级过高穿透问题怎么解决”，在日常操作中，相信很多人在小程序中textarea层级过高穿透问题怎么解决问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”小程序中textarea层级过高穿透问题怎么解决”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

自从做小程序以来，就遇到了好多坑，其中一个就是textarea层级过高，会穿透其他层次，这时候用z-index也是不管用的。 官方是这么说的： >小程序框架为了优化体验，部分组件如map、video、textarea、canvas通过原生控件实现，原生组件层级高于前端组件，为了能正常覆盖原生组件，设计了cover-view。

所以说用cover-view就可以了，但是在用cover-view的时候也有好多坑，这就导致使用cover-view会不起作用或者cover-view里的组件也不显示了，接下来我就描述一下我已经实现好的方案，希望能帮到大家。 我这边的需求是底下有个提交按钮，但是上面的textarea会穿透过提交按钮，体验很不好。

一开始我是这边写的：

<cover-view><view>提交</view></cover-view>

也是看了好多博文说这些写真机上不显示，我这边也是这样，后来才发现了报错信息。

后来我就把代码变成了这样：

<cover-view>
	<button>提交</button>
</cover-view>
// 样式
button{
	position: fixed;
	bottom: 0rpx;
	margin: auto;
	width: 100%;
	height: 37px;
	background-color: #0090FF;
	color: #FFFFFF;
	font-size: 34rpx;
	line-height: 37px;
	text-align: center;
}

但是这样依然不显示：通过给cover-view加背景颜色调试，发现cover-view没有高：

好使的版本：

<cover-view>
	<button>提交</button>
</cover-view>
// 样式
button{
	position: fixed;
	bottom: 0rpx;
	margin: auto;
	width: 100%;
	height: 37px;
	background-color: #0090FF;
	color: #FFFFFF;
	font-size: 34rpx;
	line-height: 37px;
	text-align: center;
}
cover-view{
	height: 37px;
	position: fixed;
	bottom: 0;
	width: 100%;
	z-index: 9999;
}

所以是要给cover-view加样式啊...

到此，关于“小程序中textarea层级过高穿透问题怎么解决”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！