uniapp之app、微信小程序实现输入框发送消息键盘不收起、解决iOS端键盘弹起 - ToB企服应用市场:ToB评测及商务社交产业平台

<template>
<view class="page" @touchend="handleTouchEnd">
<view class="area-msglist">
<!--
用于替代实现onPullDownRefresh()效果
:refresher-enabled="true"
:refresher-threshold="50"
refresher-default-style="white"
:refresher-triggered="isFresh"
refresher-background="#FAFAFA"
@refresherrestore="onRestore"
@refresherrefresh="scrollRefresh"
:enable-back-to-top="true"
-->
<scroll-view
class="msglist"
:refresher-enabled="true"
:refresher-threshold="50"
refresher-default-style="white"
:refresher-triggered="isFresh"
refresher-background="#FAFAFA"
@refresherrestore="onRestore"
@refresherrefresh="scrollRefresh"
:enable-back-to-top="true"
:scroll-y="true"
upper-threshold="-50"
:scroll-into-view="intoViewId"
:scroll-with-animation="true">
<view class="message" v-for="item in chatMsgList" :key="item.mid" :id="item.mid">
<view>{{item.msg}}</view>
</view>
</scroll-view>
</view>
<view class="area-input">
<view>
<image class="icon-mic" src="/package-user/static/voice.png" />
</view>
<textarea
class="textarea"
type="text"
cursor-spacing="65"
confirm-type='done'
v-model="inputMessage"
@confirm="sendMessage"
@touchend="handleNoHideKeyboard"
:confirm-hold="true"
auto-height
:show-confirm-bar='false'
:hold-keyboard="holdKeyboard"
maxlength="300"
/>
<view>
<image class="icon-mic" src="/package-user/static/Emoji.png" />
</view>
<view v-show="!inputMessage">
<image class="icon-mic" src="/package-user/static/ad.png" />
</view>
<button
v-show="inputMessage"
class="send-btn"
hover-class='hover'
@touchend.prevent="sendMessage"
>发送</button>
</view>
</view>
</template>
<script>
export default {
name: 'ChatDemo',
data() {
return {
isFresh:false, // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
freshing:false,
intoViewId: "",
chatMsgList: [],
inputMessage: "",
holdKeyboard: false, // focus时，点击页面的时候不收起键盘
holdKeyboardFlag: true, // 是否在键盘弹出，点击界面时关闭键盘
}
},
created() {
// 针对小程序键盘收起问题处理
// #ifdef MP-WEIXIN
this.holdKeyboard = true
// #endif
},
mounted() {
this.init()
},
methods: {
init() {
for (let i = 0; i < 12; i++) {
this.chatMsgList.push({
mid: `msg${i}`,
msg: `消息${i}`
})
}
this.refreshMsg()
},
// 针对小程序键盘收起问题处理
handleTouchEnd() {
// #ifdef MP-WEIXIN
clearTimeout(this.timer)
this.timer = setTimeout(() => {
// 键盘弹出时点击界面则关闭键盘
if (this.holdKeyboardFlag) {
uni.hideKeyboard()
}
this.holdKeyboardFlag = true
}, 50)
// #endif
},
// 自定义下拉刷新被触发
scrollRefresh(){
if (this.freshing) return;
this.freshing = true;
this.isFresh = true;
this.$emit('refresh');
this.getHistoryMsg()
},
// 自定义下拉刷新被复位
onRestore(){
this.isFresh = false
},
// 获取历史数据
getHistoryMsg() {
const mid = ''
this.handleScrollIntoView(mid)
},
// 刷新界面数据
async refreshMsg() {
const mid = this.chatMsgList[this.chatMsgList.length - 1].mid // 目标元素id
// 跳到最后一条
this.handleScrollIntoView(mid)
},
sleep(num = 1, step = 50) {
return new Promise((resolve) => {
setTimeout(() => {
resolve()
}, num * step)
})
},
// 查找目标元素
querySelectEl(markers) {
const that = this
return new Promise((resolve) => {
uni.createSelectorQuery().in(that).select(markers).boundingClientRect((container) => {
console.log(container, 888);
const flag = container ? true : false
resolve(flag)
}).exec()
})
},
// 滚动至目标元素位置
async handleScrollIntoView(intoViewId) {
let flag = false
for (let i = 0; i < 20; i++) {
flag = await this.querySelectEl(`#${intoViewId}`)
if(flag) {
break
}
await this.sleep()
}
// 在查询到目标元素存在后，再进行滚动操作
// 直接用nextTick在iOS端是可以的；但在android端界面重新渲染时，首次可能找不到符合id的元素，导致未能正确滚动
if (!flag) return
this.$nextTick(() => {
this.intoViewId = intoViewId
})
},
// 点击输入框、发送按钮时，不收键盘
handleNoHideKeyboard() {
// #ifdef MP-WEIXIN
// this.$emit('noHideKeyboard')
this.holdKeyboardFlag = false
// #endif
},
// 发送消息
sendMessage() {
this.handleNoHideKeyboard()
// 发送消息代码
this.chatMsgList.push({
mid: `msg${this.chatMsgList.length}`,
msg: `新消息${this.inputMessage}`
})
this.inputMessage = ''
this.refreshMsg()
},
}
}
</script>
<style lang="scss" scoped>
.page {
width: 100%;
height: 100%;
}
.area-msglist {
width: 100vw;
height: 100vh;
.msglist {
background-color: #FAFAFA;
height: calc(100vh - 80rpx);
}
}
.message {
padding: 20rpx;
margin-top: 40rpx;
line-height: 3;
text-align: end;
}
/* 解决小程序和app当前界面滚动条不出现的问题 */
::v-deep ::-webkit-scrollbar {
/*滚动条整体样式*/
width: 5px !important;
height: 1px !important;
overflow: auto !important;
background: #ccc !important;
-webkit-appearance: auto !important;
display: block;
}
::v-deep ::-webkit-scrollbar-thumb {
/*滚动条里面小方块*/
border-radius: 10px !important;
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) !important;
background: #ccc !important;
}
::v-deep ::-webkit-scrollbar-track {
/*滚动条里面轨道*/
background: #FFFFFF !important;
}
.area-input {
width: 100%;
height: auto;
position: fixed; // 用的是fixed布局
bottom: 0;
right: 0;
z-index: 1;
padding: 0;
display:flex;
align-items:center;
background-color: #f2f2f2;
}
.icon-mic{
width: 22px;
height: 22px;
padding: 5px 10px;
position: relative;
top: 2px;
}
.textarea {
width: 100%;
font-size: 14px;
padding: 0 10px;
display: inline-block;
margin: 10rpx;
line-height: 48rpx;
position:relative;
top: 0;
background-color: #fff;
border-radius: 16px;
flex: 1;
max-height: 200rpx;
min-height: 60rpx;
}
.send-btn {
font-size: 10px;
background-color: #2196F3;
color: #fff;
margin-right: 10px;
}
</style>

复制代码