之前做过的小程序里面这种功能不是太重要,所以有点小瑕疵也一直没去理它。但是这次的小程序有一个话题评论功能,要求比较高,查csdn翻文档好半天终于实现了
第一步:输入框固定在页面底部 + 适配底部安全区
<view class="bottom-view">
<view class="bottom-input" style="padding-bottom: {{inputBottom}}rpx;">
<textarea v-model="myComment" :maxlength="-1" :adjust-position="false" :auto-height="true" :fixed="true" confirm-type="done" :hold-keyboard="true" @focus="inputFocus" @blur="inputBlur" @confirm="inputConfirm" :placeholder="placeholder" @keyboardheightchange="keyboardheightchang"/>
</view>
</view>
// 适配的底部外容器
.bottom-view{
position: fixed;
z-index: 99999;
bottom: 0;
padding-bottom: env(safe-area-inset-bottom);
}
.bottom-input{
background-color: #FFFFFF;
border-top: 1px solid #f5f5f5;
width: 100vw;
padding: 30rpx;
}
第二步:固定页面 + 将输入框顶起来显示在软键盘上方??textarea文档
将textarea的adjust-position属性置为false? 保证页面不移动
监听键盘高度,将输入框顶起
keyboardheightchang(e){
this.inputBottom = e.detail.height * this.proportion + 20
},
?其实也没辣么难 =v=
|