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

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

创新互联自2013年起,先为封丘等服务建站,封丘等地企业,进行企业商务咨询服务。为封丘企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

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

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

一开始我是这边写的:

提交

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

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


	

// 样式
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没有高:

好使的版本:


	

// 样式
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层级过高穿透问题怎么解决”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!


文章标题:小程序中textarea层级过高穿透问题怎么解决
本文链接:http://pwwzsj.com/article/ieshgc.html