前言
类似与抖音、小红书里面的评论框。默认显示在页面底部，评论、回复时弹起按键与输入框（也可默认不显示，只有评论、回复时弹起示），如下图：
小程序评论、回复框.jpg
实现代码
- test.wxml
<!--pages/test/test.wxml-->
<view class="container">
<button bindtap="bindReply">回复</button>
<view class="release">
<textarea
class="text"
placeholder-class="releaseInput"
value="{{content}}"
fixed="true"
maxlength="120"
show-confirm-bar="{{false}}"
cursor-spacing="15"
auto-height="true"
focus="{{focus}}"
placeholder="回复 {{user.name}}"
value="{{content}}"
bindinput="contentInput"></textarea>
<view class="submit" bindtap="comment">发送</view>
</view>
</view>
- test.wxss
/* pages/test/test.wxss */
.release{
font-size: 14px;
background-color: #fff;
display: flex;
align-items: flex-end;
justify-content: space-between;
box-sizing: border-box;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
padding: 5px 0 5px 15px;
}
.releaseInput{
color: #ccc;
}
.release .text{
width: 302px;
min-height: 17px;
max-height: 51px;
line-height: 17px;
border-width: 7px 10px;
border-style: solid;
border-color: #fff;
background-color: #fff;
}
.release .submit{
color: #6c0;
width: 58px;
height: 32px;
line-height: 32px;
text-align: center;
}
- test.js
//test/test.js
Page({
data: {
content: '',
focus: false
},
bindReply(e) {
this.setData({
focus: true
});
},
contentInput(e) { //当输入框的值发生改变时，获取
this.setData({
content: e.detail.value
});
}
})
