wxml

1. <view class="talk" bindtap="bindReply">回复</view>
2.  
3. <view class="release" hidden="{{!releaseFocus}}">
4. <textarea class="text"
5. placeholder-class="input_null"
6. fixed="true"
7. maxlength="-1"
8. show-confirm-bar="false"
9. cursor-spacing="15"
10. auto-height="true"
11. focus="{{releaseFocus}}"
12. placeholder="回复 {{releaseName}}"></textarea>
13. <view class="submit">发送</view>
14. </view>

wxss

1. .input_null{
2. color: #C9C9C9;
3. }
4.  
5. .release{
6. display: flex;
7. align-items: flex-end; /*底部对齐*/
8. justify-content: space-between; /*两端对齐*/
9. box-sizing: border-box;
10. position: fixed;
11. left: 0;
12. bottom: 0;
13. width: 100%;
14. padding: 18rpx 0 18rpx 30rpx;
15. background-color: #F7F8F7;
16. font-size: 28rpx;
17. z-index: 999;
18. }
19. .release .text{
20. width: 604rpx;
21. min-height: 34rpx;
22. max-height: 102rpx; /*最多显示三行*/
23. border-width: 15rpx 20rpx; /*使用padding与预期留白不一致，故使用border*/
24. border-style: solid;
25. border-color: #ffffff;
26. line-height: 34rpx;
27. font-size: 28rpx;
28. background-color: #ffffff;
29. border-radius: 4rpx;
30. }
31. .release .submit{
32. width: 116rpx;
33. height: 64rpx;
34. line-height: 64rpx;
35. text-align: center;
36. color: #66CC00;
37. }

js

1. Page({
2. /**
3. * 页面的初始数据
4. */
5. data: {
6. releaseFocus: false,
7. },
8. /**
9. * 生命周期函数--监听页面加载
10. */
11. onLoad: function (options) {
12.  
13. },
14. /**
15. * 点击回复
16. */
17. bindReply: function(e){
18. this.setData({
19. releaseFocus: true
20. })
21. }
22. })

预览

显示