uniapp實現聊天窗體相關問題記錄

Js 數據添加k-v鍵值對

//發送消息
insertMessage(){
    //獲取鍵盤輸入的信息
    var msg = this.message;
    //創建鍵值對
    var tmp = {msg:msg}
    //添加到數組中
    this.userMsgList.push(tmp);
}

頁面讀取

<view v-for="(item,index) in userMsgList" :key="index">
	{{item.msg}}
</view>

//發送消息
insertMessage:function(e){
    this.$nextTick(function () {
        //DOM 更新了

    })

    //獲取鍵盤輸入的信息
    var msg = this.message;
    //創建鍵值對
    var tmp = {msg:msg}
    //添加到數組中
    this.userMsgList.push(tmp);
    //清空輸入框
    this.message = "";

    uni.pageScrollTo({
        scrollTop: 9999999999,//暴力滑動
        duration: 300
    });

    // uni.onWindowResize((res) => {
    //     console.log('變化后的窗口寬度=' + res.size.windowWidth)
    //     console.log('變化后的窗口高度=' + res.size.windowHeight)
    // })

},

頁面窗口大小監聽（鍵盤彈出收回事件監聽）

uni.onWindowResize((res) => {
    console.log('變化后的窗口寬度=' + res.size.windowWidth)
    console.log('變化后的窗口高度=' + res.size.windowHeight)
})

消息輸入框問題記錄

• 問題描述：輸入框輸入內容后，點擊自定義的按鈕觸發發送消息事件，此時消息輸入框失去焦點，軟鍵盤回收。（實際想要的效果，點擊自定義按鈕觸發發送消息事件后，文本框 的內容清空，但是不失去焦點，軟鍵盤不回收）‘

• 已使用的解決辦法：

  • 通過uniapp的文檔

  focus	Boolean	false	獲取焦點。	在 H5 平台能否聚焦以及軟鍵盤是否跟隨彈出，取決於當前瀏覽器本身的實現。
  confirm-type	String	done	設置鍵盤右下角按鈕的文字，僅在 type="text" 時生效。
  confirm-hold	Boolean	false	點擊鍵盤右下角按鈕時是否保持鍵盤不收起	App、微信小程序、支付寶小程序、百度小程序、QQ小程序

  confirm-type 有效值

  值	說明	平台差異說明
  send	右下角按鈕為“發送”	微信、支付寶、百度小程序、App的nvue
  search	右下角按鈕為“搜索”
  next	右下角按鈕為“下一個”	微信、支付寶、百度小程序、App的nvue
  go	右下角按鈕為“前往”
  done	右下角按鈕為“完成”	微信、支付寶、百度小程序、App的nvue

  App平台的nvue頁面，如果是uni-app編譯模式，直接使用此屬性設置即可生效。如果是weex編譯模式，需通過weex的api設置，weex相關文檔參考

  App平台的vue頁面不支持控制鍵盤右下角為“發送”，涉及聊天的建議使用nvue。

  實際效果，發送按鈕為彈出的軟鍵盤右下方的按鈕，與預期的點擊指定的按鈕有所差距，只有點擊軟鍵盤右下的按鈕，輸入框才會一直聚焦，點擊自定義的按鈕，無效

  • js阻止默認事件

    uniapp觸發不了

  • 動態修改input的focus屬性

    可以實現，不過只能觸發一次，並且在觸發自定義按鈕的事件后，輸入框重新聚焦后，但在此過程中，軟鍵盤會有一個明顯的回收在彈出的一個過程

解決方法待定