微信小程序开发-textarea高度问题

正在做一个记事本的小程序

记事自然少不了textarea组件

编辑页面我的设计是上面一行标题栏，下面一行按钮操作区，中间就是textarea填充剩余空间

效果如下图

使用flex布局很容易就做到上述效果，一个container包含一个竖直排列的三个view

中间的view放textarea

<!--index.wxml-->
<form  bindsubmit="onSubmit" bindreset="">
<view class="container">
    <view class='title'>
        <input name="title" placeholder-class="placeholder" placeholder="在此输入标题" value="{{note.title}}" />
    </view>
    <view class='row' id="textareawrap" catchtap="onFocus">
        <textarea  fixed="true" class='text' value="{{note.content}}" maxlength="5000"  
        focus='{{focus}}' name="content"   placeholder="点击添加文本"   />
    </view>
    
    
    <view class='bottom'>
         <button formType="submit" class='btn success'>保存</button>
        <button class='btn del' bindtap="onDelete">删除</button>
    </view>
</view>
</form>

再来看wxss

page{
    width: 100%;
    height: 100%;
}
.container{
    flex-flow:column nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    display: flex;
}
.title{
    margin: 15rpx 5%;
    width: 90%;
    text-align: left;
    height: 60rpx;
    font-size: 38rpx;
    border-bottom: 1px solid #f5f5f5;
}
.row{
    flex: 1;
    display: flex;
    width: 90%;
    height:100%;
    margin: 0 5%;
    overflow: hidden;
    
}
.row .text{
    flex: 1;
    width: 100%;
    height: 100%;//<----这里是重点，textarea的高度
    font-size: 16px;
    line-height: 26px;
    color: #000000;    
}
.date{
    padding: 5rpx 0;
}
.bottom{
    width: 100%;
    background: #fafafa;
    display: flex;
    flex-flow:row nowrap;
    justify-content: center;
    align-items: center;
    border-top:1px solid #d9d9d9;
}
.bottom .btn{
    flex: 1;
    line-height: 2;
    padding-top: 10rpx;
    padding-bottom: 10rpx;
    margin: 30rpx 30rpx;
}
.btn.success{
    background: #1aad19;
    color: #fff;
}
.btn.del{
    background: #e64340;
    color: #fff;
}

把上面代码写好，在电脑上编译，运行，模拟器里效果完美

但是，但是。。。

在真机上

textarea的内容已经超出了实际区域，而且此时操作“保存”或“删除”按钮也是没有任何作用，被textarea挡住了

查看官方文档 https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

有这么一句说明

1. tip: textarea 组件是由客户端创建的原生组件，它的层级是最高的，不能通过 z-index 控制层级。

原来是被渲染成原生组件

上面wxss中定义的height:100%; 不是填充满所在view的空间，而是整个page的空间

所以这里只能给textarea定义固定高度比较 height:300px; 这样修改后内容超出的问题解决了

但这样的效果又不太好，中间的区域留有一大段空白，我们需要动态的设置textarea高度

幸好有 wx.createSelectorQuery()接口

使用这个接口就可以获取中间view的高度，把这个view的高度设置给textarea就可以了

js代码如下

Page({
    data: {
      note: {
        id: "",
        title: "",
        summary: "",
        content: "",
        createTime: "",
        updateTime: "",
        isDelete: 0
        

      },
      isNew: false,
      focus: false,
      height:"" //data里面增加height属性
    },
    
    /**
     * 页面渲染事件
     */
    onShow: function() {
        var that = this;
        
        let id = "#textareawrap";
        let query = wx.createSelectorQuery();//创建查询对象
        query.select(id).boundingClientRect();//获取view的边界及位置信息
        query.exec(function (res) {
          that.setData({
            height: res[0].height + "px"
          });
        });
        
    }
    
    
});

wxml代码修改如下：

<textarea  fixed="true" class='text' value="{{note.content}}" maxlength="5000"  style="height:{{height}}"
        focus='{{focus}}'
        name="content"   placeholder="点击添加文本"   />

在textarea里面增加 style="height:{{height}}" 动态设置高度

结果符合预期

有兴趣的朋友同学可以扫描二维码体验一下这个简单的笔记本，多多支持！