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

实现思路如下:

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. Linux centosVMware Tomcat介绍、安装jdk、安装Tomcat

    一.Tomcat介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache.Sun和其他一些公司及个人共同开 ...

  2. Maven项目-端口被占用java.net.BindException: Address already in use: JVM_Bind <null>:8080解决方法

    异常显示: 问题所在:之前启动的tomcat未停止,端口被占用. 解决方法: 养成良好的习惯,用完之后停掉服务.

  3. Python—数据类型之集合(Set)

    1.集合是一个无序的,且不重复元素的集合.它里面的元素是可哈希的(不可变类型),但是集合本身是不可哈希(所以集合做不了字典的键)的. 2.基本功能包括关系测试和消除重复元素.注意:集合存在的意义就是去 ...

  4. 01 MATLAB基本概念

    基本概念 整数类型 相同整数类型相乘还是整数 整数与浮点数相乘是这种整数类型 不同整数类型不能相乘,除非强制类型转换 整数与整数相乘: >> x = uint32(120); >&g ...

  5. windows下安装redis并部署服务

    下载地址: windows版本: https://github.com/MSOpenTech/redis/releases Linux版本: 官网下载: http://www.redis.cn/ gi ...

  6. 大部分政府网站U-mail存在直接拿shell漏洞

    大部分网站政府网站U-mail存在直接拿shell漏洞加入webmail/userapply.php?execadd=333&DomainID=111直接爆出物理地址 然后将 aa' unio ...

  7. Linux之网络配置

    Linux系统网络设备配置文件在/etc/sysconfig/network-scripts/目录中,可使用Vim编辑器编辑网卡配置文件,来配置网络服务,在RHEL7中,网卡配置文件以前缀ifcfg开 ...

  8. java并发:初探sleep方法

    sleep与wait sleep是Thread方法,使得当前线程从运行态变为阻塞态.但它不会释放对象的锁. wait方法是Object方法,它的作用是使得当前拥有对象锁的线程从运行态变为阻塞态, 它会 ...

  9. Codeforces 598D:Igor In the Museum

    D. Igor In the Museum time limit per test 1 second memory limit per test 256 megabytes input standar ...

  10. 「AT1983 BBQ Hard」

    呦,来一次久违的BBQ吧! AT题...日本的题库质量一向很高 这题是有关组合数的DP... 前置芝士 快速计算组合数,具体还是自行百度. 膜域下的除法. 具体做法 题目中的问题: \(\sum_{i ...