这是在 开发者工具上展示的，自定义的弹出框可以覆盖textarea文本
下面是手机上显示的，textarea文本漂浮在自定义的弹出框上，点击有文本的地方，弹出软键盘
下面是文本的代码
<view class="weui-cells__title">您的留言</view><view class="weui-cells weui-cells_after-title"> <view class="weui-cell"> <view class="weui-cell__bd" style="z-index: 100"> <textarea placeholder="请输入您的留言" style="height: 5em;" value="{{ qrNote }}" bindinput="qrNoteBindinput"/> </view> </view> </view> |
下面是自定义弹出框的代码
<!-- 自定义软键盘 --> <!-- 遮罩层 --><view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{ showModalStatus }}"></view> <!-- 弹出框 --><view animation="{{ animationData }}" class="drawer_box" wx:if="{{ showModalStatus }}"> <view class="numberBody"> <label wx:for="{{ numbers }}" class="numberBox" bindtap="selectNumber" data-number="{{ item }}"> {{ item }} </label> </view> <view class="letterBody"> <label wx:for="{{ Letters }}" class="letterBox" bindtap="selectLetter" data-letter="{{ item }}"> {{ item }} </label> </view></view> |
下面是弹出框的js代码
powerDrawer: function (e) { console.log(e) let currentStatu = e.currentTarget.dataset.statu this.util(currentStatu)},util: function (currentStatu) { /* 动画部分 */ // 创建动画实例 let animation = wx.createAnimation({ duration: 200, timingFunction: 'linear', delay: 0 }) this.animation = animation animation.opacity(0).rotate(0).step() this.setData({ animationData: animation.export() }) setTimeout(() => { animation.opacity(1).rotateX(0).step() this.setData({ animationData: animation }) if (currentStatu == 'close') { this.setData({ showModalStatus: false }) } }, 200) if (currentStatu == 'open') { this.setData({ showModalStatus: true }) }}, |
下面是css样式代码
.drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #fff; opacity: 0; overflow: hidden;}.drawer_box { width: 100%; overflow: hidden; position: fixed; bottom: 0px; left: 0; z-index: 9999; background: #999;}.numberBody { margin: 0px 0px; text-align: center;}.numberBox { background-color: #fff; display: inline-block; border-radius: 2px; width: 7.5%; color: #000; padding: 5px 0px; margin: 0px 4px; margin-top: 12px; text-align: center; font-size: 34rpx;}.letterBody { margin: 0px 0px; text-align: center; padding-bottom: 25rpx;}.letterBox { background-color: #fff; display: inline-block; border-radius: 2px; color: #000; padding: 5px 2.8%; margin: 0px 1.2%; margin-top: 12px; text-align: center; font-size: 32rpx;} |
可能有表达不清楚的地方请指出。
我遇到的问题是，textarea直接影响我的弹出视图的点击事件了（父视图）会优先聚焦。。。。不知道楼楼主有遇到过没有
官方说是底层的东西 也不好解决。只能我们在应用层解决。。。。。
可覆盖的原生组件包括
map、video、canvas、camera，只支持嵌套cover-view cover-view不行弹出框用cover-view试试吧
好吧，我目前的解决方法是 当弹出框显示的时候，就隐藏textarea，您说的这个 等以后有空 在试下，谢啦！
对呀 小明同学 ，不过我没试过
您说用cover-view，是指弹出框用cover-view来实现？
tip:textarea组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。试试 cover-view 吧