uniapp 完美解决苹果和安卓 input 框遮挡兼容问题

需求描述

小程序项目用到IM即时通讯功能，苹果和安卓出现input输入框被软键盘遮挡的情况。

效果展示

uniapp 完美解决苹果和安卓 input 框遮挡兼容问题

解决问题

HTML部分（结构很重要）

	
		
		
			
				
					{{item}}

CSS部分

	.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;
		}
	}

JS 部分

	export default {

		data() {
			return {
				scrollTop: 0,
				chatType: 'voice',
				showFunBtn: false,
				triggered: false,
				content: '',
				messageList: ['啊啊啊啊',
					'啊啊啊啊', '去去去去去去', '问问吾问无为谓', '呃呃呃呃呃呃呃呃呃', '热热热热热热热热', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意义有意义一月又一月',
					'啊啊啊啊', '去去去去去去', '问问吾问无为谓', '呃呃呃呃呃呃呃呃呃', '热热热热热热热热', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意义有意义一月又一月',
					'啊啊啊啊', '去去去去去去', '问问吾问无为谓', '呃呃呃呃呃呃呃呃呃', '热热热热热热热热', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意义有意义一月又一月',
					'啊啊啊啊', '去去去去去去', '问问吾问无为谓', '呃呃呃呃呃呃呃呃呃', '热热热热热热热热', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意义有意义一月又一月',
					'啊啊啊啊', '去去去去去去', '问问吾问无为谓', '呃呃呃呃呃呃呃呃呃', '热热热热热热热热', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意义有意义一月又一月',
					'啊啊啊啊', '去去去去去去', '问问吾问无为谓', '呃呃呃呃呃呃呃呃呃', '热热热热热热热热', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意义有意义一月又一月',
					'啊啊啊啊', '去去去去去去', '问问吾问无为谓', '呃呃呃呃呃呃呃呃呃', '热热热热热热热热', '吞吞吐吐吞吞吐吐拖拖沓沓推塔推塔推塔推塔推塔推塔', '有意义有意义一月又一月'
				]
			}
		},
		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('恢复')
					this.triggered = false
				}, 2000)
			}
		}
	}

具体怎么回事，尝试将Demo运行起来就差不多理解了。

点赞评论收藏 ~~ 留言讨论，如有错误，也希望大家不吝指出。 ~~ 点赞评论收藏

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://www.net2asp.com/6737513abd.html