uni-app如何解决微信小程序textarea原生组件最高层级问题

在初次写微信小程序或者有vue.js基础而没写过微信小程序直接上手uni-app框架编译成微信小程序以及其他多端的项目，普遍都会遇到微信小程序textarea原生组件在真机调试样式穿透问题，（微信小程序官网关于textarea组件链接https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html）

直接上结构代码：

 在data return函数中：

data(){

      return {

        isContentFocus: true,

        isInputContentFocus: false,

      }

    }

代码截图：

在methods代码块执行的方法:

bindContentFocus(e) { // 点击事件

        this.isContentFocus = false; 

        this.isInputContentFocus = true;

      },

      bindContentBlur(e) { // 失去焦点

        this.isContentFocus = true; 

        this.isInputContentFocus = false;

      },

      onPageScroll() {

        this.isContentFocus = true;

        this.isInputContentFocus = false;

      },

前提说明：根据自己的需求情况来做不同的解决方案。不过思路基本是一样，通俗讲我们常说的遮眼法，显示以及不显示的自由切换。 

思路：首先样式肯定先写好，所以不上样式代码！！页面在首次加载完毕后，将isContentFocus初始为true，isInputContentFocus为false，此时注意看结构，哪个模块显示以及不显示。此时textarea原生组件不显示状态，用假象模块显示，在用户点击textarea框时，执行bindContentFocus方法，将isContentFocus赋值为false，isInputContentFocus赋值为true。此时textarea原生组件显示状态，假象模块不显示，起到了显示以及不显示的自由切换，在用户输入后离开焦点事件，将两个值重新赋值初始状态。onPageScroll方法是用于处理滚动时存在textarea原生组件穿透的问题，根据自己实际情况使用哈！技术不深，方法简单，希望帮助你们。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/qq_36124960/article/details/103543305