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>

終於解決困擾一個星期的問題。如果對你有幫助，請給個贊，謝謝！