uni-app uview scroll-view ios 输入框被键盘遮挡问题解决思路

思路:利用 scroll-view元素的 scroll-into-view属性定位

<template>
    <u-form
    class="u-flex-col u-flex-1"
    :model="data.submit"
    ref="uFormSubmit1" 
    :errorType="['toast','message']" 
    @touchmove.stop.prevent="() => {}">
    <view class="page u-flex-col">

        <u-navbar back-text="返回" title="剑未配妥,出门已是江湖"></u-navbar>

        <scroll-view scroll-y class="u-flex-1 u-flex-col" @touchmove.stop="() => {}"
        :scroll-into-view="data.scrollIntoView">
            <view class="scroll-content u-flex-1">
            <!-- 防止无法提交上一步下一步 -->
            <u-form-item v-show="false" prop="submit"></u-form-item>
            <view class="operation-box">
                <u-form-item
                class="u-relative u-flex-1" 
                label-width="150" 
                label-position="left" 
                :label="'姓名'+item" 
                :key="index"
                :id="'u-form-item'+index"
                v-for="(item,index) in ['first',32,3,3,3,33,3,3,3,6,6,66,6,6,6,6,6,6,6,6,6,,66,6,6,6,6,6,6,'last']"
                required
                >
                    
                    <u-input
                    type="text" 
                    @tap="data.scrollIntoView='';data.formIndex='u-form-item'+index;"
                    style="pointer-events:none"
                    :placeholder-style="$u.uConfig.ofPlaceStyle" 
                    placeholder="请输入姓名"/>
                    <u-icon v-if="false" class="u-absolute" name="minus-circle-fill" color="#c0c4cc" size="68" style="cursor: pointer;right: 4px;"></u-icon>
                
                </u-form-item>
            </view>
            </view>
        </scroll-view>
        <view class="footer u-flex u-row-between">
            <text class="u-flex-1">提交</text>
        </view>

        
    </view>
    </u-form>
</template>

<script setup>
    
    import { reactive, ref } from 'vue';
    

    
    const uFormSubmit1 = ref(null);
    
    const data = reactive({
        scrollIntoView:"",
        formIndex:"",
        submit:{
            
        }
    })

    // // 监听窗口高度变化事件
    uni.onWindowResize((res)=>{
        console.log(res);
        data.scrollIntoView=data.formIndex;
    })
    // uni.offWindowResize(windowResizeCallback)
    
    
    // 监听窗口高度变化事件
    // uni.onWindowResize(function (res) {
    //   // 获取输入框位置信息
    //   uni.createSelectorQuery().select('.scroll-view').boundingClientRect(function (rect) {
    //     // rect为输入框的位置信息
    //     // rect.top: 输入框距离页面顶部的距离
    //     // rect.height: 输入框的高度
    //  // 窗口高度变化时,重新计算重叠高度
    //  let overlapHeight = res.windowHeight - rect.top - rect.height;
    //  // 调整页面滚动位置
    //  // uni.pageScrollTo({
    //  //   scrollTop: overlapHeight,
    //  //   duration: 300
    //  // });
    //   }).exec();
      
    // });
    

</script>

<style lang="scss" scoped>
    .page{
        height: 100vh;
        overflow: hidden;
        
    }

    scroll-view{
        height: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }
    .scroll-content{
        padding: 0 16px;
        overflow: hidden;
    }
    .operation-box{
        padding: 23rpx 30rpx;
        box-sizing: border-box;
        background: #FFFFFF;
        border-radius: 23rpx;
        margin-bottom: 23rpx;
        &:last-child{
            margin-bottom: 0;
        }
    }
    .footer{
        height: 46px;
        background: #007EFE;
        width: 100%;
        text-align: center;
        .next{
            background: red;
        }
        .greay{
            background: #cccccc;
        }
        text{
            padding: 12px 0;
            height: 100%;
            font-size: 16px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            
        }
    }
</style>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容