小程序想要實現評論功能,想到的就是input 和 textarea這兩個組件,簡單說一下,這兩個組件的區別
input:單行文本框
textarea:多行文本框
這里我用的是textarea來實現評論這一功能。
思路:
要實現的效果,先點擊評論按鈕,再彈出文本框進行編輯文字
1、就要先在.js文件中,data初始化一個值,discussShow :false
2、然后在wxml文件中通過wx:if判斷discussShow 為true時,顯示評論框
通過點擊評論,上圖為評論的點擊事件,將discussShow設置為true,反饋給視圖頁。
上面紅框即是第2條要實現的語句
以上就可以實現通過點擊評論按鈕,底部懸浮評論文本框。
拓展問題:
點擊評論,底部出現評論框,即textarea,輸入文字,滑動頁面的時候,字體會跟著上下滑動。
解決方法:
設置textarea fixed="true" 即可,也就是wxml代碼視圖中的綠框。
官方文檔
fixed Boolean false?
如果 textarea 是在一個 position:fixed 的區域,需要顯示指定屬性 fixed 為 true
那么,如果我想在彈出評論文本框的同時,觸發鍵盤彈出,就需要wxml代碼視圖中的藍色框框。
灰色框:-1,不限字數
注意:
點擊了textarea組件,鍵盤彈起時,自動上推頁面,默認鍵盤彈窗彈出到位置是textarea組件輸入聚焦位置(就是輸入框的光標一直閃爍的位置);所以就是沒有設置textarea組件和鍵盤的位置距離導致的覆蓋相關樣式現象。
此時,用到了wxml代碼圖示中的黃色框的屬性。設置了光標底部到鍵盤的距離。這樣,鍵盤就不會擋住文本框了。