怎么解决微信小程序中textarea层级过高的问题

本篇内容主要讲解“怎么解决微信小程序中textarea层级过高的问题”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么解决微信小程序中textarea层级过高的问题”吧!

建立一个新的textarea 组件代替原生textarea ,上代码

<template>   <view class="ui-textarea">     <textarea class="textarea {{ hide? 'hidden':''}}" auto-height maxlength="{{maxlength}}" name="{{ name }}" value="{{ txt }}" placeholder="{{ placeholder }}" bindinput="onInput" bindblur="onBlur" focus="{{focus}}"></textarea>     <view hidden="{{ hide == false }}" class="{{ txt === ''?'text placeholder':'text'}}" bindtap="onFocus">{{ txt ===''? placeholder:txt }}</view>   </view> </template> <script> export default {   config: {     usingComponents: {}   },   behaviors: [],   properties: {     placeholder: {       type: String,       value: ''     },     maxlength: {       type: Number,       value: 128     },     name: String,     value: {       type: String,       value: ''     }   },   data: {     hide: true,     txt: '',     focus: false   },   ready() {     if (this.data.value != '') {       this.setData({ txt: this.data.value })     }   },   methods: {     onFocus() {       this.setData({ hide: false, focus: true })     },     onInput(e) {       this.setData({ txt: e.detail.value })     },     onBlur() {       this.setData({ hide: true, focus: false })     }   } } </script> <style lang="less"> .ui-textarea {  position: relative !important;  .textarea.hidden {   display: block !important;   position: absolute !important;   left: -999px;   right: -999px;   top: 0;  }  .textarea {   width: 100%;   box-sizing: border-box;  }  .text {   height: 100%;   padding: 6px 5px;   font-size: 14px;  }  .placeholder {   color: #888;  } } </style>

Vue 代码,自己根据需求改一下 ,特别注意,不要用 wx;if 或者 hidden 属性 , wx:if 频繁渲染,虽然可以用,hidden 会出现 部分显示bug,[hidden] 会使auto-height 首次不正确

到此，相信大家对“怎么解决微信小程序中textarea层级过高的问题”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！