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

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.xdnf.cn/news/16582.html

相关文章:

  • iOS安全和逆向系列教程 第21篇:iOS应用加密与混淆技术深度剖析
  • Java面试宝典:MySQL性能优化
  • 用 ESP32 和 LCD 轻松显示植物湿度
  • 第十八章:AI的“通感”:揭秘图、文、音的共同语言——CLIP模型
  • 系统整理Python的循环语句和常用方法
  • Keil MDK 嵌入式开发问题:Error: L6218E: Undefined symbol HAL_TIM_PWM_ConfigChannel
  • GIt学习——分布式版本控制工具
  • 设计模式(八)结构型:桥接模式详解
  • 设计模式(七)结构型:适配器模式详解
  • 【网络协议安全】任务15:DHCP与FTP服务全配置
  • 安装Selenium⾃动化
  • PiscCode使用OpenCV实现漂浮方块特效
  • 三种常用的抗锯齿
  • Java大数据面试实战:Hadoop生态与分布式计算
  • esp32s3创建rust工程 window成功mac
  • 结构化文本文档的内容抽取与版本重构策略
  • net8.0一键创建支持(Orm-Sqlite-MySql-SqlServer)
  • 【最新最完整】SpringAI-1.0.0开发MCP Server,搭建MCP Client 实战笔记(进阶+详细+完整代码)
  • Map(HashMap、LinkedHashMap、TreeMap)双列集合
  • 【机器学习深度学习】LLaMAFactory评估数据与评估参数解析
  • 《频率之光:危机降临》
  • 下载 | Win11 官方精简版,系统占用空间极少!(7月更新、Win 11 IoT物联网 LTSC版、适合老电脑安装使用)
  • 进度条制作--Linux知识的小应用
  • RabbiteMQ安装-ubuntu
  • Flutter实现列表功能
  • 【lucene】向量搜索底层文件关系梳理
  • git删除远程分支和本地分支
  • WPFC#超市管理系统(2)顾客管理、供应商管理、用户管理
  • docker 自定义网桥作用
  • macOS 安装 Homebrew