当前位置: 首页 > news >正文

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

实现效果

代码如下

<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)// 调用页面滚动的apiuni.pageScrollTo({duration: 100, // 滚动动画过渡时间scrollTop: data.top, // 滚动的值})}).exec();},},}
</script>
<style >.aa{height: 1300rpx;width: 100%;background-color: red;}
</style>

http://www.dtcms.com/a/300818.html

相关文章:

  • 基础配置介绍,VLAN配置,DHCP配置
  • 迷宫生成与路径搜索(A算法可视化)
  • SparkSQL — get_json_object函数详解(解析 json)
  • 离散组合数学 : 母函数
  • QT6 源,七章对话框与多窗体(16)多文档 MDI 窗体 QMdiArea 篇二:源代码带注释
  • 栈----4.每日温度
  • AIC 2025 热点解读:如何构建 AI 时代的“视频神经中枢”?
  • 主要分布于内侧内嗅皮层的层Ⅲ的边界向量细胞(BVCs)对NLP中的深层语义分析的积极影响和启示
  • Tkinter美化 - 告别土味Python GUI
  • VScode输出中文乱码问题解决
  • C++ 构造函数中阻止资源泄漏的实践探索
  • Java中get()与set()方法深度解析:从封装原理到实战应用
  • 2025年项目数据看板工具选型指南,精选12款
  • Spring Cloud Alibaba:微服务架构的最佳选择?
  • 系统思考:快就是慢
  • 编写SQL语句时,#{} 和 ${}的区别
  • 一文读懂 JWT(JSON Web Token)
  • 使用橙武低代码平台做数据统计:定时任务汇总数据并生成日报表
  • 零基础学习性能测试:JVM性能分析与调优-JVM垃圾回收机制,GC对性能的影响
  • Gradio.NET 中文快速入门与用法说明
  • Python-初学openCV——图像预处理(四)——滤波器
  • Python 数据分析(四):Pandas 进阶
  • 负载均衡Haproxy
  • [NOIP 2004 提高组] 合并果子 Java
  • Vue 框架 学习笔记
  • 《汇编语言:基于X86处理器》第10章 结构和宏(1)
  • 【任务6.15】字符串操作
  • 51c自动驾驶~合集9
  • 以太坊ETF流入量超越比特币 XBIT分析买币市场动态与最新价格
  • 51核和ARM核单片机OTA实战解析(二)