思路:利用 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>