一步解决微信小程序textarea层级太高遮挡其他组件的问题

由于小程序中的textarea组件是原生组件,而原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上,造成输入的文字会显示在小程序其他组件上,如下图所示:

<view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</view>

网上有一些绕弯路的解决办法,其实小程序有一个直接解决原生组件覆盖问题的办法,就是使用cover-view,小程序为了解决原生组件层级最高的限制。小程序专门提供了 cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。这两个组件也是原生组件,但是使用限制与其他原生组件有所不同。

上方覆盖部分改为如下即可:

<cover-view class='bar bottomfix shadow justify-center'>

<button class='' formType="submit" type="primary" style='font-size:12pt;border:0px;width:300px;'> 保 存</button>

</cover-view>

效果如下,动手试试吧!

到此就解决了遮盖问题,顺带说一下该小程序页面的业务说明,这个页面主要用于日程设置,在此设置日程后,只要关注关联的微信公众号即可收到设定的日程提醒消息。成品小程序可扫下边二维码进行预览:

下方是对应公众号二维码,可以体验一下日程自动提醒功能。 

 

评论 9
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值