天天看点

关于微信小程序穿透问题

关于微信小程序穿透问题

1.微信组件表单标签input、textarea有穿透效果;

2.会穿透在这两个标签上面的块,textarea还会穿透vConsole;

3.对于input的穿透可以给定位在上面的块一个层数且大于等于2;

4.对于textarea的穿透,当定位在上面的块显示的时候用一个块代替textarea显示内容,隐藏的时候还原textarea标签及显示内容;测试代码如下:

wxml:

<input style="margin-top:1000rpx;" placeholder="input输入"></input>
<textarea  wx:if="{{vm==0}}" style="width:100%;height:250rpx;" placeholder="textarea输入" bindinput="text" value="{{textvalue}}"></textarea>
<view wx:if="{{vm==1}}" style="position:fixed;background:#999;width:100%;height:100%;top:0;left:0;z-index:2;">
  <view wx:if="{{vm==1}}" catchtap="hidden">隐藏</view>
</view>
<view catchtap="tk">弹框</view>
<!-- 另外不会穿透picker -->
<picker range="{{list}}">piker</picker>
           

js:

data: {
    list:[
      'afs',
      'asdas',
      'afsjk',
      'asdls'
    ],
    vm:0
  },
  text(e){
    var textvalue=e.detail.value;
    this.setData({
      textvalue: textvalue
    })
  },
  tk(){
    this.setData({
      vm:1
    })
  },
  hidden() {
    this.setData({
      vm: 0
    })
  },