vue嵌套H5到APP，安卓键盘顶起页面内容错乱解决方案

1.h5嵌套到APP，input输入框页面被键盘顶起错乱
2.解决方案：不能使用定位，使用margin-top
3.如果想满屏兼容比如登陆页面 按钮在下面 不允许出现滚动则则需要手动计算margin-top的高度
4.需求 ：登陆页面内嵌H5，兼容各个类型的手机不允许出现滑动，满屏展示

<template><view class="box" :style="minHeight"><view @click="goBack"><u-icon name="close" size="32"></u-icon></view><view class="bolid-text">注册CCAPP账号</view><view class="think-text">推荐使用手机验证码登录</view><view class="phone-text">手机号</view><view class="input-sty"><u-input v-model="user.phoneNo" type="number" border="none" placeholder="请输入手机号" /></view><view class="valide-text">短信验证码</view><view class="input-sty"><view style="width: 80%;"><u-input v-model="user.verifyCode" type="number" border="none" maxlength="6" placeholder="请输入验证码" /></view><view><tui-countdown-verify :seconds="90" :successVal="successVal" @send="send" :params="1" radius="70rpx"borderColor="#05CBA3" color="#05CBA3" :resetVal="resetVal"></tui-countdown-verify></view></view><view class="shop" v-show="chanelFlag">渠道门店：{{channelName}}</view><view class="registersIos" :style="{backgroundColor: text =='注册' ? '#04CBA3' :'#696969 ',marginTop: minHeight}" @click="goSubmit">{{text}}</view><view class="xieyiIos">继续即表示您同意 <text style="color: #05CBA3;margin: 0 10rpx;text-decoration: underline;" @click="goProtocol">用户协议</text> 和 <text style="color: #05CBA3;margin: 0 10rpx;text-decoration: underline;"@click="goPrivacy">隐私条款</text></view><u-toast ref="uToast" /></view>
</template><script>// let wx1 = require("../../static/jweixin-1.6.0")import {ajax} from '@/ajax.js';import {setPageMinHeight} from '@/fn.js'import tuiCountdownVerify from "@/components/tui-countdown-verify.vue";import {loading,hideLoading,} from "@/fn.js";export default {components: {tuiCountdownVerify,},data() {return {uid: "",value: '',successVal: 0,iswx: false,resetVal: 0,channelName: '',text: '注册',user: {phoneNo: '',verifyCode: '',sharePhoneNo: '',},chanelFlag: false,system:'',minHeight:0}},mounted() {this.minHeight = uni.getSystemInfoSync().windowHeight - 350 + 'rpx' // 重要代码！！！计算出注册按钮到上个盒子的margin-top距离console.log(this.minHeight)},onLoad(e) {if (e.uid) {this.uid = e.uid}this.system = this.detectOS()console.log(this.system)if (e.sharePhoneNo) {uni.setStorageSync('sharePhoneNo', e.sharePhoneNo) //分享者的手机号码}// this.getChannel()if (uni.getStorageSync('sharePhoneNo')) {this.getChannel()this.chanelFlag = true;}let ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger') {this.iswx = true;}},onReady() {this.refCode = this.$refs.uCode;},methods: {/*用户协议*/goProtocol() {uni.navigateTo({url: '/pages/agreement/agreement'})},/*隐私政策*/goPrivacy() {uni.navigateTo({url: '/pages/agreement/clause'})},/*返回上一级别*/goBack() {uni.navigateBack(1)},/*获取渠道*/getChannel() {let that = this;ajax("get", '/health/channel/getBySharePhoneNo/' + uni.getStorageSync('sharePhoneNo')).then(res => {console.log('cc')console.log(res)console.log(res.hasOwnProperty("data"))console.log('cc')if(res.hasOwnProperty("data")){that.channelName = res.data.channelName}else{that.channelName = uni.getStorageSync('sharePhoneNo')}})},handleLaunchFn(e) {alert('success', e)},handleErrorFn(e) {alert('fail', e);},handleReadyFn(e) {alert('fail', e);},openMini() {loading()ajax('get', '/applet/nav/toApplet/' + this.uid).then(res => {hideLoading()let cData = JSON.parse(res.msg)location.href = cData.openlink});},/*发送验证码*/send() {let that = this;let reg = /^1[3456789]\d{9}$/;if (this.user.phoneNo == '') {this.resetVal++;this.$refs.uToast.show({message: '请输入手机号码',duration: 500})return false;}if (!reg.test(this.user.phoneNo)) {this.resetVal++;this.$refs.uToast.show({message: '手机号码不正确',duration: 500})return false;}// that.$u.api.getCode({// 	data: {// 		user: {// 			mobile: that.user.mobile// 		}// 	}// }).then(res => {// 	that.successVal++;// 	that.$refs.uToast.show({// 		message: '验证码已发送',// 	})// }).catch(err => {// 	that.resetVal++;// })ajax("get", "/health/user/getVerifyCode", {phoneNo: that.user.phoneNo}).then(res => {that.successVal++;that.$refs.uToast.show({message: '验证码已发送',})})},/*注册*/goSubmit() {let that = this;that.user.sharePhoneNo = uni.getStorageSync('sharePhoneNo')if (that.text == '注册') {ajax("post", "/health/user/login", that.user).then(res => {that.successVal++;that.$refs.uToast.show({message: '注册成功',})if (that.iswx) {let timer = setTimeout(() => {clearTimeout(timer)let timer = null;uni.navigateTo({url: '/pages/browser/index?sharePhoneNo='+ that.user.sharePhoneNo})}, 1000)} else {uni.navigateTo({url: '/pages/loadapp/loadapp?type=a&sharePhoneNo=' + that.user.sharePhoneNo})}}).then(res => {that.text = '注册成功'})} else {uni.navigateTo({url: '/pages/browser/index?sharePhoneNo='+ that.user.sharePhoneNo})}},/*判断页面是ios还是安卓*/detectOS() {var userAgent = navigator.userAgent || navigator.vendor || window.opera;// 检测iOS设备if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {return 'iOS';}// 检测Android设备if (/Android/.test(userAgent)) {return 'Android';}// 如果不是iOS或Android，则返回其他return 'Other';},}}
</script><style scoped>.box {width: 100%;padding-top: 80rpx;padding-left: 76rpx;padding-right: 76rpx;box-sizing: border-box;height: 100vh;position: relative;/* overflow-y: scroll */}.bolid-text {font-family: PingFangSC, PingFang SC;font-weight: 800;font-size: 48rpx;color: #000000;margin-top: 74rpx;}.think-text {font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 24rpx;color: #B6B6B6;margin-top: 12rpx;}.phone-text {font-family: PingFangSC, PingFang SC;font-weight: 800;font-size: 32rpx;color: #000000;margin-top: 86rpx;}.valide-text {font-family: PingFangSC, PingFang SC;font-weight: 800;font-size: 32rpx;color: #000000;margin-top: 52rpx;}.input-sty {border-bottom: 2rpx solid #E6E6E6;display: flex;align-items: center;margin-top: 20rpx;padding-bottom: 16rpx;}.u-input {padding: 12rpx 0 !important;}.shop {box-sizing: border-box;margin-top: 62rpx;height: 96rpx;border-radius: 12rpx;border: 2rpx solid #04CBA3;font-family: PingFangSC, PingFang SC;font-weight: 600;font-size: 28rpx;color: #04CBA3;display: flex;justify-content: flex-start;align-items: center;word-break:break-all;padding-left: 20rpx;padding-right: 20rpx;box-sizing: border-box;background-color: #E5FAF5;position: absolute;top: 725rpx;left: 76rpx;}.registersAndro {width: 60%;height: 88rpx;border-radius: 12rpx;color: #FFFFFF;display: flex;justify-content: center;align-items: center;margin-top: 200rpx}.registersIos{width: 60%;height: 88rpx;border-radius: 12rpx;color: #FFFFFF;display: flex;justify-content: center;align-items: center;margin: 0 auto;/* margin-top: calc(100vh - 1000rpx); */}.xieyiAndro {font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #919191;margin: 40rpx auto 0;text-align: center;}.xieyiIos{font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 28rpx;color: #919191;text-align: center;width: 100%;margin-top: 52rpx;}
</style>