前言
類似與抖音艘狭、小紅書里面的評論框。默認顯示在頁面底部喘蟆，評論缓升、回復(fù)時彈起按鍵與輸入框（也可默認不顯示，只有評論蕴轨、回復(fù)時彈起示）港谊，如下圖：
小程序評論、回復(fù)框.jpg
實現(xiàn)代碼
- test.wxml
<!--pages/test/test.wxml-->
<view class="container">
<button bindtap="bindReply">回復(fù)</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="回復(fù) {{user.name}}"
value="{{content}}"
bindinput="contentInput"></textarea>
<view class="submit" bindtap="comment">發(fā)送</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) { //當輸入框的值發(fā)生改變時橙弱，獲取
this.setData({
content: e.detail.value
});
}
})
