问题描述: 页面上写一个textarea组件,再写一个popup弹层作为信息提示,结果发现textarea组件与页面其他组件不在同一个层级上,设置z-index样式为负值也不管用,只有原生wx.showToast()等接口的显示层级才能覆盖住textarea组件填写的内容,其他任何popup等弹层都不能遮住,设置z-index为10亿也没用;
wxml代码如下:
<view class='address-list-item'> <textarea class='input-textarea' auto-height='{{true}}' maxlength='50' placeholder='企业地址(这是一个有bug的组件,组件与页面其他组件不在一个zIndex)'></textarea> </view> |
js代码
//提交表单 formSubmit: function(e){ let self = this; let formData = e.detail.value; console.log(formData); let phonecall = formData.phonecall; if (phonecall.length>0 && !Method.regCheck(phonecall,/^[0-9]{7,8}$/)){ Toast({ mask: true, message: '这是一个popup层,不能遮住有bug的textarea组件' }); /*wx.showToast({ icon:'none', mask:true, title: '能遮住有bug的textarea组件', })*/ return; } }, |
真机截图如下:
我参考了这个方法，虽然有点出入，但感觉目前找到最好的
https://www.jianshu.com/p/79c512cb0b35
cover-view组件也不行啊
我试了可以，在开发者工具不可以，真机上可以
<textarea style="height： 80px; width: 90%; margin: 0 auto; border: 1px solid #000" placeholder="输入内容"></textarea>
<button bindtap="handleIsShowPopup" style="margin-top: 20px" type="primary">显示弹出层</button>
<cover-view bindtap="handleIsShowPopup" style="display: {{show ? 'block' : 'none'}}; width: 100%; height: 100%; position: fixed; background-color: rgba(0, 0, 0, 0.5); left: 0; top: 0;"></cover-view>
Page({
data: {
show: false
},
// 显示/隐藏弹出层
handleIsShowPopup () {
let show = !this.data.show;
this.setData({ show });
}
});
可以啊,兄dei,谢谢
textarea是原生组件，原生组件的层级是最高的，所以页面中的其他组件无论设置
z-index为多少，都无法盖在原生组件上。https://developers.weixin.qq.com/miniprogram/dev/component/native-component.htmlpopup弹层里面用cover-view组件看看行不