这篇文章主要介绍了微信小程序 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 首次不正确

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。