小程序想要實(shí)現(xiàn)評論功能乾巧,想到的就是input 和 textarea這兩個組件疚俱,簡單說一下渴杆,這兩個組件的區(qū)別
input:單行文本框
textarea:多行文本框
這里我用的是textarea來實(shí)現(xiàn)評論這一功能挠羔。
思路:
要實(shí)現(xiàn)的效果墓陈,先點(diǎn)擊評論按鈕桑驱,再彈出文本框進(jìn)行編輯文字
1、就要先在.js文件中跛蛋,data初始化一個值熬的,discussShow :false
2、然后在wxml文件中通過wx:if判斷discussShow 為true時赊级,顯示評論框
通過點(diǎn)擊評論押框,上圖為評論的點(diǎn)擊事件,將discussShow設(shè)置為true理逊,反饋給視圖頁橡伞。
上面紅框即是第2條要實(shí)現(xiàn)的語句
以上就可以實(shí)現(xiàn)通過點(diǎn)擊評論按鈕,底部懸浮評論文本框晋被。
拓展問題:
點(diǎn)擊評論兑徘,底部出現(xiàn)評論框,即textarea羡洛,輸入文字挂脑,滑動頁面的時候,字體會跟著上下滑動欲侮。
解決方法:
設(shè)置textarea fixed="true" 即可崭闲,也就是wxml代碼視圖中的綠框。
官方文檔
fixed Boolean false?
如果 textarea 是在一個 position:fixed 的區(qū)域威蕉,需要顯示指定屬性 fixed 為 true
那么刁俭,如果我想在彈出評論文本框的同時,觸發(fā)鍵盤彈出韧涨,就需要wxml代碼視圖中的藍(lán)色框框牍戚。
灰色框:-1,不限字?jǐn)?shù)
注意:
點(diǎn)擊了textarea組件虑粥,鍵盤彈起時如孝,自動上推頁面,默認(rèn)鍵盤彈窗彈出到位置是textarea組件輸入聚焦位置(就是輸入框的光標(biāo)一直閃爍的位置)舀奶;所以就是沒有設(shè)置textarea組件和鍵盤的位置距離導(dǎo)致的覆蓋相關(guān)樣式現(xiàn)象暑竟。
此時斋射,用到了wxml代碼圖示中的黃色框的屬性育勺。設(shè)置了光標(biāo)底部到鍵盤的距離但荤。這樣,鍵盤就不會擋住文本框了涧至。