uniapp input 聚焦时键盘弹起滚动到对应的部分

实现效果

代码如下

javascript 复制代码
<template>
	<view id='app'>
	<view class="aa"></view>
	<iconfont name="left"></iconfont>
		姓氏:<input style="background-color: antiquewhite;" type="text" v-model="aa" @focus="focus()" class="input1">+

	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			focus(value){
				console.log(111)
				this.pageScroll()
			},
			pageScroll() {
				// 先获取目标dom的实例信息
				// data即为实例信息, data.top, data.left, data.right, data.bottom即为dom的对应坐标
				uni.createSelectorQuery().select('.input1').boundingClientRect(data => { 
					console.log("data.top",data.top)
					// 调用页面滚动的api
					uni.pageScrollTo({
						duration: 100, // 滚动动画过渡时间
						scrollTop: data.top, // 滚动的值
					})
				}).exec();
			},
		},
	}
</script>
<style >
	.aa{
		height: 1300rpx;
		width: 100%;
		background-color: red;
	}
</style>
相关推荐
哆啦A梦15883 小时前
点击Top切换数据
前端·javascript·vue.js
小光学长4 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH4 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据5 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年6 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una6 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年7 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js7 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发
angelQ8 小时前
Vue 3 中 ref 获取 scrollHeight 属性为 undefined 问题定位
前端·javascript
我的div丢了肿么办8 小时前
js函数声明和函数表达式的理解
前端·javascript·vue.js