需求描述
小程序項(xiàng)目用到IM即時(shí)通訊功能，蘋果和安卓出現(xiàn)input輸入框被軟鍵盤遮擋的情況。
效果展示
解決問(wèn)題
HTML部分（結(jié)構(gòu)很重要）
<template>
<view class="content">
<!-- 聊天內(nèi)容展示區(qū) -->
<scroll-view class="scroll-view" scroll-with-animation :scroll-y="true" :scroll-top="scrollTop" refresher-enabled
:refresher-triggered="triggered" @refresherrefresh="handleFresh">
<view id="page">
<view v-for="(item,index) in messageList" :key="index" style="margin-bottom: 20rpx;">
{{item}}
</view>
<view :class="showFunBtn?'show-fun-btn':'not-show-fun-btn'" />
</view>
</scroll-view>
<!-- 底部聊天輸入框 -->
<view class="input-box">
<view class="input-box-flex">
<view class="input-box-flex-grow">
<input v-if="chatType === 'voice'" type="text" class="content" :adjust-position="true"
:hold-keyboard="true" v-model="content" :confirm-type="'send'" :confirm-hold="true"
:cursor-spacing="10" @blur="blurHandle" @focus="focusHandle" @confirm="sendMsg" />
</view>
<!-- 功能性按鈕 -->
<u-icon class="icon_btn_add" size="50" name="plus-circle" @tap="switchFun"></u-icon>
</view>
<view class="fun-box" :class="{ 'show-fun-box': showFunBtn }"> </view>
</view>
</view>
</template>
CSS部分
<style lang="scss">
.content {
position: relative;
height: 100vh;
overflow: hidden;
}
.scroll-view {
height: 100vh;
box-sizing: border-box;
.show-fun-btn {
width: 100%;
height: 340rpx;
}
.not-show-fun-btn {
width: 100%;
height: 180rpx;
}
}
.input-box {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
background-color: #eaeaea;
padding-bottom: 50rpx;
&-flex {
display: flex;
align-items: center;
padding: 20rpx;
box-sizing: border-box;
image {
width: 56rpx;
height: 56rpx;
}
.icon_img {
margin-right: 20rpx;
}
.icon_btn_add {
margin-left: 20rpx;
}
&-grow {
flex-grow: 1;
.content {
background-color: #fff;
height: 80rpx;
padding: 0 20rpx;
border-radius: 12rpx;
font-size: 28rpx;
}
}
}
.fun-box {
opacity: 0;
transition: all 0.1s ease-in-out;
height: 0;
.grid-text {
padding-top: 10rpx;
}
}
.show-fun-box {
opacity: 1;
height: 160rpx;
}
}
</style>
JS 部分文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-527447.html
<script>
export default {
data() {
return {
scrollTop: 0,
chatType: 'voice',
showFunBtn: false,
triggered: false,
content: '',
messageList: ['啊啊啊啊',
'啊啊啊啊', '去去去去去去', '問(wèn)問(wèn)吾問(wèn)無(wú)為謂', '呃呃呃呃呃呃呃呃呃', '熱熱熱熱熱熱熱熱', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意義有意義一月又一月',
'啊啊啊啊', '去去去去去去', '問(wèn)問(wèn)吾問(wèn)無(wú)為謂', '呃呃呃呃呃呃呃呃呃', '熱熱熱熱熱熱熱熱', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意義有意義一月又一月',
'啊啊啊啊', '去去去去去去', '問(wèn)問(wèn)吾問(wèn)無(wú)為謂', '呃呃呃呃呃呃呃呃呃', '熱熱熱熱熱熱熱熱', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意義有意義一月又一月',
'啊啊啊啊', '去去去去去去', '問(wèn)問(wèn)吾問(wèn)無(wú)為謂', '呃呃呃呃呃呃呃呃呃', '熱熱熱熱熱熱熱熱', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意義有意義一月又一月',
'啊啊啊啊', '去去去去去去', '問(wèn)問(wèn)吾問(wèn)無(wú)為謂', '呃呃呃呃呃呃呃呃呃', '熱熱熱熱熱熱熱熱', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意義有意義一月又一月',
'啊啊啊啊', '去去去去去去', '問(wèn)問(wèn)吾問(wèn)無(wú)為謂', '呃呃呃呃呃呃呃呃呃', '熱熱熱熱熱熱熱熱', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意義有意義一月又一月',
'啊啊啊啊', '去去去去去去', '問(wèn)問(wèn)吾問(wèn)無(wú)為謂', '呃呃呃呃呃呃呃呃呃', '熱熱熱熱熱熱熱熱', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意義有意義一月又一月'
]
}
},
onLoad() {
this.scroll()
},
methods: {
switchFun() {
this.showFunBtn = !this.showFunBtn;
uni.hideKeyboard()
this.scroll()
},
blurHandle() {
},
focusHandle() {
},
sendMsg() {
this.messageList.push(this.content)
this.content = ''
this.scroll()
},
scroll() {
this.$nextTick(() => {
uni.createSelectorQuery().select('#page').boundingClientRect((rect) => {
console.log(rect.height)
this.scrollTop = rect.height
}).exec()
})
},
handleFresh() {
console.log('下拉刷新中')
this.triggered = true;
setTimeout(() => {
console.log('恢復(fù)')
this.triggered = false
}, 2000)
}
}
}
</script>
具體怎么回事，嘗試將Demo運(yùn)行起來(lái)就差不多理解了。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-527447.html
點(diǎn)贊 評(píng)論 收藏 ~~ 留言討論，如有錯(cuò)誤，也希望大家不吝指出。 ~~ 點(diǎn)贊 評(píng)論 收藏
到了這里，關(guān)于uniapp 完美解決蘋果和安卓 input 框遮擋兼容問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
