当前位置: 首页 > 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.lryc.cn/news/601656.html

相关文章:

  • Python入门构建网页
  • Python爬虫实战:研究netaddr库相关技术构建IP地址信息采集分析系统
  • r0env2024:开箱即用的AI工具集成Kali发新版
  • Java学习-------外观模式
  • 不坑盒子:Word里1秒制作“花括号”题目,多音字组词、形近字组词……
  • J3160迷你小主机 性能测试 对比i3-4170 以及服务器
  • 【Linux | 网络】传输层(UDP和TCP)
  • Word和WPS文字如何制作分栏试卷?想分几栏分几栏
  • 使用uni-app开发一个点餐收银台系统前端静态项目练习
  • Netty中 ? extends Future<? super V>这种的写法的理解
  • 使用GPU训练模型
  • MyBatis-Plus高效开发实战
  • 关于GRPC的相关知识。
  • 编程语言Java——核心技术篇(五)IO流:数据洪流中的航道设计
  • 点击劫持:潜藏在指尖的安全陷阱
  • 【Unity3D实例-功能-移动】角色移动-通过WSAD(Transform方式)
  • 《频率之光:共振之恋》
  • 益莱储:明智地投资测试仪器
  • 数据结构的基本知识
  • [STM32][HAL]stm32wbxx 超声波测距模块实现(HY-SRF05)
  • 深度学习在计算机视觉中的应用:对象检测
  • Java面试全栈通关:从微服务到AI的技术深度解析
  • 市电有电检测电路
  • elasticsearch 倒排索引原理详解
  • 湖南(源点咨询)市场调研 如何在行业研究中快速有效介入 起头篇
  • 一场关于电商零售增长破局的深圳探索
  • Python类(class)参数self的理解
  • ROS2总结(二)
  • VMware Workstation Pro虚拟机的下载和安装图文保姆级教程(附下载链接)
  • Mysql 二进制安装常见问题