【uniapp实战笔记】聊天APP的开发踩坑记录

点击蓝字 关注我

一、输入框吞字，光标闪动问题

uniapp 中使用输入框，无论是 input 组件还是 textarea 组件，都存在一个问题。

如果组件绑定 v-model 的话，会有两个BUG：

①输入时，在苹果手机或者使用部分特殊有待选区域的输入法，会存在输入框吞字；

②从文字中间输入时，光标会闪动到最后。

该问题的解决方案，最终只能使用 :value 去绑定输入框，为输入框分配两个变量，一个是真实的 value 值，一个是临时的 tempValue 值。

临时的 tempValue 值用于在输入触发的 @input 事件内实时接收，真实的 value 值只在第一次由无值到有值的时候接收一次，后面只需在发送时设置真实 value 值为空即可清空输入框。

<template>
    <textarea :value="value" @input="handleInput"></textarea>
    <button @click="handleClickSend">发送</button>
</template>

export default {
    data: {
        value: '',
        tempValue: ''
    }
    handleInput(event) {
        const value = event.detail.value
        if(!this.value) {
            // 第一次值为空时赋给真实值
            this.value = value
        }
        this.tempValue = value // 临时值用于实时接收
    }
    asynchandleClickSend() {
        if(!this.value) {
            return
        }
        // 发送时，临时值存储的为当前输入框内的值
        // 随后将真实value值设置为空实现清空输入框
        // 模拟发送请求
        const res = await this.$axios.post({
            url: xxxx,
            text: this.tempValue 
        })
        this.value = '' // 清空输入框
    }
}

二、组件key值问题

<template>
    <viewclass="chat-warp"v-for="item of msgList":key="item.id">
        <!-- 注意，需要给组件也给key值 -->
        <chat-item:item="item":key="item.id"></chat-item>
    </view></template>

三、消息定位问题

（1）滚动不到最底部的问题

// 在onReady钩子中调用goBottom
onReady() {
    this.$nextTick(() => {
        this.goBottom()
    })
}
// 滚动到底部函数
goBottom() {
    this.scrollView = '' // scrollview瞄点置空
    this.$nextTick(async () => {
        const res = await this.checkMsgIsRender('btm') // 检测最底部的消息是否完全渲染完毕
        if(res) {
            this.scrollView = 'bottom' // 瞄点至底部
        } else {
            this.goBottom()
        }
    })
}
// 检测消息是否渲染完毕
checkMsgIsRender(position) {
    let msgID = ''
    if(position === 'btm') {
        // 底部
        // 找到最底部的消息ID
        msgID = xxxx
    } else {
        // 顶部
        // 找到最顶部的消息ID
        msgID = yyyy
    }
    // 返回一个Promise
    return new Promise((resolve) => {
        const query = uni.createSelectorQuery().in(this)
        query.select('#id').boundingClientRect(data => {
            // 存在data，且存在宽和高，视为渲染完毕
            if(data && data.width && data.height) {
                resolve(true)
            } else {
                resolve(false)
            }
        }).exec();
    })
}

（2）下拉加载更多消息瞄点定位不准的问题

// 加载更多
async loadMore() {
    await this.getMoreMsg() // 向服务器获取更多消息或者展示本地消息，该函数不展开
    let location = async () => {
        const res = await this.checkMsgIsRender('top') // 检测最顶部的消息是否完全渲染完毕
        if(res) {
            // 这里还需要找到需要瞄点过去的消息ID，zzzz
            this.scrollView = zzzz // 瞄点到消息zzzz
        } else {
            location ()
        }
    }
    this.scrollView = '' // scrollview瞄点置空
    this.$nextTick(() => {
        location ()
    })
}

总结

扫扫二维码 关注我

了解更多资讯、技术、趣闻