zoukankan      html  css  js  c++  java
  • 微信小程序textarea层级过高(盖住其他元素)问题的解决办法

    1.首先,textarea为微信小程序原生组件,其层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上。

    2.解决方法:

    方法一:可通过官方提供的<cover-view/>标签嵌套view或者button,或者用<cover-image/>标签

    <cover-view>
        提交
    </cover-view>  


    方法二:我用的vant weapp,第一种方法无法嵌套其组件,遂用一下方法

    (1)用view盛放会覆盖的placeholder(注:如果有弹出层,当弹出弹出层时禁用textarea)

    <view class="placeholder" wx:if="{{locationShow}}">{{ location || '请输入事发地点'}}</view>
    <textarea class="myTextarea" value="{{location}}" data-name="location" bindfocus="locationFocus" bindinput="dataInput" bindblur="locationInput"></textarea>

    (2)定义变量

    location:'',
    locationShow:true,

    (3)添加方法

    //地点聚焦
      locationFocus() {
        this.setData({
          locationShow: false
        })
      },
     dataInput(e){
          var name=e.target.dataset.name,obj={};
          obj[name]=e.detail.value;
          this.setData({
            ...obj
          })
        },
      //地点输入
      locationInput() {
        this.setData({
          locationShow: input.length ? false : true
        });
      },
    

      方法三:部分view啥的可通过:z-index:99999 !important;   解决

  • 相关阅读:
    终于想起了博客园密码
    关于GCD的8题
    idea快捷键 ctrl + shift + f 失效解决方法
    前端和后端日期类型交互
    poi、easypoi和easyexcel的使用
    事务总结
    数据库cte的理解和使用
    mybatis 调用存储过程没有返回值
    postgresql 查询锁表并解锁
    tigase网络核心SockThread详解(十九)
  • 原文地址:https://www.cnblogs.com/miaSlady/p/12566198.html
Copyright © 2011-2022 走看看