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. })

預覽

顯示