首页 > 上网技巧 > 电脑小技巧 > 微信小程序 textarea 穿透问题

微信小程序 textarea 穿透问题

时间:2020-10-09 19:16 作者:QQ地带 我要评论

这是一个经常会遇到的问题,例如,小程序 form 表单提交信息页面。只要包含 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>
修改后的效果:
 
 
 
注意事项
一定要加上 z-index 否则无效。

标签: 微信小程序
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告