uni-app打包h5页面ios唤起软键盘踩坑

问题：页面有很多input框，上面的input输入框，当虚拟键盘出来时没问题，但是下面的input输入框，就会出现问题，input输入框会跑到键盘后面。

 

网上一阵百度，找到原因：安卓手机中唤起软键盘时页面会压缩webview的高度，窗口会执行resize事件，但ios并不会。网上各种百度，尝试，都失败了，在快放弃时，找到一个可行的。直接贴代码：

<template>
    <view class="wrapper" id="wrapper" ref="wrapper">
        <scroll-view  
            :style="{'height': scrollHeight}"
            class="scroll-view"
            :scroll-y="true">
            <view class="evaluate-type-list">
                <view 
                    class="evaluate-type-item" 
                    v-for="(item, index) in options" 
                    :key="index">
                    <view class="item-top">
                        <view class="title">
                            {{item.title}} 
                            <text class="score">({{item.score}})</text>
                        </view>
                        <view class="content">{{item.content}}</view>
                    </view>
                    <view class="item-bottom"> 
                        <view class="content">
                            评价
                            <input 
                                v-model.number="item.evaluateScore"
                                class="input" 
                                type="number" 
                                placeholder="请输入评价分数" 
                                @input="checkScore(item)"
                                @focus="focusInput"
                                @blur="blurInput"
                                placeholder-style='color: #d1d1d1' />
                        </view>
                        <view class="err-tip" v-if="item.isErr">{{item.errTip}}</view>
                    </view>
                </view>
            </view>
            <button class="btn-submit" @tap="submit">确定</button>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                scrollHeight: 'calc(100vh - 20upx)',
            }
        },
        methods: {
            focusInput() {
                // 获取系统信息
                let info = uni.getSystemInfoSync();
                if(info.platform === 'ios') {
                    setTimeout(() => {
                        let viewInfo = this.$refs.wrapper.$el.getBoundingClientRect();
                        // 获取视图偏移量，重新定位操作栏
                        this.bottomVal = Math.abs(parseFloat(viewInfo.top))
                        // 重置编辑区高度
                        this.scrollHeight =  `calc(100vh - ${98 + this.bottomVal}px )`
                    }, 500)
                }
            },
            blurInput() {
                this.scrollHeight = 'calc(100vh - 180upx)';
            },
            
        }
    }
</script>

<style lang="scss" scoped>
</style>

终于解决困扰一个星期的问题。如果对你有帮助，请给个赞，谢谢！