小程序 textarea 穿透问题

更新日期: 2020-10-23 阅读次数: 208 字数: 352 分类: 微信小程序

这是一个经常会遇到的问题,例如,小程序 form 表单提交信息页面。只要包含 textarea 组件,并且底部有固定的按钮,一定会遇到这个问题。虽然不影响功能,但是还是影响体验。问题截图:

小程序 textarea 穿透问题

可以看到,textarea 中的文字,显示在了按钮上方。看上去就好像按钮是透明的一样。实际会有两个问题:

  • 不填写 textarea 文字时,cell 的边框线,会穿透 button,即,可见
  • 填写 textarea 之后,文字会穿透 button

问题影响范围

真机 ios, android 和开发工具都会受到影响。

出现穿透的原因

textarea 是原生组件。

原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。

详见微信小程序官方文档: https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

解决方法

使用 cover-view 替换 view 来解决。

原代码:

.bottom_btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
}

<view class="bottom_btn">
    <button class="primary" style="width: 95%;">立即报名</button>
</view>

修改之后的代码:

.bottom_btn {
	position: fixed;
	bottom: 0;
	width: 750rpx;
	z-index: 999;
}

<cover-view class="bottom_btn">
    <button class="primary" style="width: 95%;">立即报名</button>
</cover-view>

修改后的效果:

小程序 textarea 穿透问题

注意事项

一定要加上 z-index 否则无效。

领取阿里云/腾讯云服务器优惠券

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊, 查看更多联系方式。 白天写程序,晚上哄熊孩子,可能回复有点慢,见谅。同时也欢迎关注我的微信公众号“大象工具”: 大象工具微信公众号

相关文章

爱评论不评论

近期节日

2020年12月01日 世界艾滋病日
2020年12月03日 国际残疾人日
2020年12月07日 大雪
2020年12月09日 "一二九"运动纪念日
2020年12月09日 世界足球日
2020年12月10日 世界人权日
2020年12月12日 西安事变纪念日
2020年12月13日 南京大屠杀
2020年12月20日 澳门回归日
2020年12月21日 国际篮球日
2020年12月21日 冬至
2020年12月24日 平安夜
查看更多节日