项目需求:在页面中,不管位于何处,点击评论按钮页面滚动到对应到位置

实现思路如下:

uni.createSelectorQuery().select(".comment").boundingClientRect((res)=>{
uni.pageScrollTo({
duration:0,
scrollTop:res.top
})
}).exec();

但是你会发现,在页面没有滚动之前点击评论按钮可以直接滚动到评论,如果我页面有滚动,滚动距离就会出现偏差

这是因为滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离,相关代码如下:

uni.createSelectorQuery().select(".image-details").boundingClientRect(data=>{
uni.createSelectorQuery().select(".comment").boundingClientRect((res)=>{
uni.pageScrollTo({
duration:0,
scrollTop:res.top - data.top
})
}).exec()
}).exec();

相关链接:

  官方获取节点信息:https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery

每天一点点之 uni-app 框架开发 - 页面滚动到指定位置的更多相关文章

  1. 使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录

    给内容容器添加样式:-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果. auto: ...

  2. ios开发之--令UITableView滚动到指定位置

    这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...

  3. 【NX二次开发】Block UI 指定位置

    属性说明 属性   类型   描述   常规           BlockID    String    控件ID    Enable    Logical    是否可操作    Group    ...

  4. hybrid App h5二级页面返回的时候保持与一级页面浏览的位置一致

    最近在开发公司hybrid app的时候,需要将原本原生的配置中心模块统一变更为H5,做完之后从测试那里反馈回来这样一个问题,当滑到页面底部或中部的时候进入子页面进行设置,返回的时候页面应该定位到离开 ...

  5. 每天一点点之vue框架开发 - 引入Jquery

    1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...

  6. 每天一点点之vue框架开发 - 使用vue-router路由

    1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...

  7. 上门洗车APP --- Androidclient开发 之 网络框架封装介绍(二)

    上门洗车APP --- Androidclient开发 之 网络框架封装介绍(二) 前几篇博文中给大家介绍了一下APP中的基本业务及开发本项目使用的网络架构: 上门洗车APP --- Androidc ...

  8. 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  9. MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换

      概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...

随机推荐

  1. Encoding.UTF8 与 new UTF8Encoding(false) 有什么区别?

    System.Text.Encoding.UTF8 是一个静态实例,它省略了 BOM,而 new UTF8Encoding(false) 创建的实例是含有 BOM 的. BOM,即 Byte Orde ...

  2. warning no match for this type name: entity.User [Xlint:invalidAbsoluteTypeName]

    这个bug是由于在spring的配置文件中的错误 这是由于上述中的 这一句中的这里的类名的引用错了,我的正确类名引用是 所以只要将包引用的包名修改为User类的完全限定名就可以了

  3. Day1-C-CF-1144A

    简述:给你一串字符,判断是否由连续字母构成且每个字符只出现一次 思路:用set直接储存,判断size和初末位置字母与size的关系即可 代码: #include<iostream> #in ...

  4. 「APIO2012」派遣

    「APIO2012」派遣 传送门 当预算超过限制时,优先丢掉薪水高的忍者(左偏树维护一下),然后答案取合法答案的最大值. 参考代码: #include <algorithm> #inclu ...

  5. 设计模式课程 设计模式精讲 18-2 迭代器模式coding

    1 代码演练 1.1 代码演练1(迭代器模式演练) 1.2 代码使用场景 1 代码演练 1.1 代码演练1(迭代器模式演练) 需求: 课程管理:需要实现课程可进行增添,删除,并能够打印出课程列表. u ...

  6. PLSQL Developer常用设置及快捷键

    CSDN日报20170314--<40岁程序员真的要被淘汰了么?> 程序员2月书讯 [直播]用面向协议的思想简化网络请求 博客一键搬家活动开始啦 PLSQL Developer常用设置及快 ...

  7. Write-up-CH4INRULZ_v1.0.1

    关于 下载地址:点我 哔哩哔哩:哔哩哔哩 信息收集 网卡:vboxnet0,192.168.56.1/24,Nmap扫存活主机发现IP为192.168.56.101 ➜ ~ nmap -sn 192. ...

  8. target信息异常

    当工程的编译target信息异常的时候,可以删除YourProjectName.xcodedeprij/xcuserdate目录. 该目录存有当前用户的各种工程状态信息,删除后重启Xcode,Xcod ...

  9. python之字符串,列表,字典,元组,集合内置方法总结

    目录 数字类型的内置方法 整型/浮点型 字符串类型的内置方法 列表的内置方法 字典的内置方法 元组的内置方法 集合类型内置方法 布尔类型 数据类型总结 数字类型的内置方法 整型/浮点型 加 + 减 - ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 表格:响应式表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...