小程序textarea穿透、不跟随页面滚动解决方案

一、textarea穿透

        由于textarea是原生组件,层级是最高的,页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上

        这时可以选择列表自定义组件,使用 cover-view 和 cover-image 组件代替view和image,cover-view 和 cover-image 组件,可以覆盖在部分原生组件上面。

        或者使用if,当触发选择列表时隐藏itextare组件,选择完成点击确认关闭选择列表,显示textare。

 

二、不跟随滚动

       当页面设置了overflow或者overflow-y允许滚动时就会出现不跟随的情况

       尝试了多种方案,最后使用富文本框editor代替textarea,editor即不会有穿透问题,也不会不跟随,不过也有缺点,就是不能像textarea和input一样动态绑定数据;而且placeholder是斜体。不过解决起来比textarea方便多了(注意:小程序版本需要2.7.0以上,现在应该基本都在这以上了)

      实现动态赋值就用到了bindinput的方法了也可以使用其他属性,根据情况自行决定。如果需要重置、撤回功能,则需要在editor初始化完成后获取对象并存储,后期再按调用对应的方法实现

       

       至于placeholder斜体,文档也没设置属性,找了很久,给editor设置以下css样式 即可

 .ql-editor.ql-blank:before {

      /* 此处设置 placeholder 样式 */

      color: rgba(0, 0, 0, 0.5);

      font-style: normal;

  }

    希望对你有所帮助^_^

   若有不足请大佬指正

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页