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

实现思路如下:

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. ls命令与cd命令

    ls命令用于显示文件目录列表,当使用ls命令时,默认显示的只有非隐藏文件或文件夹(隐藏文件在linux中前面有 ' . ' ),当不加参数时,显示当前目录. 1.ls命令语法 ls [参数][目标文件 ...

  2. SD-WAN基本介绍

    SD-WAN是什么? SD-WAN,即软件定义广域网络,是将SDN技术应用到广域网场景中所形成的一种服务.这种服务用于连接广阔地理范围的企业网络.数据中心.互联网应用及云服务,旨在帮助用户降低广域网的 ...

  3. Xftp和Xshell

    Xftp 用于跟云虚拟机文件传输的工具,Xftp官网 Xshell Xftp的兄弟工具,用于执行云虚拟机命令,Xshell官网 两个都是付费工具,各需要几百块钱,当然破解的版本也很多 登陆 这两个的连 ...

  4. 本周总结(19年暑假)—— Part4

    日期:2019.8.4 博客期:110 星期日 最近还是学开车,听了父母的建议,为了将来的考研,我开始对基本学课进行复习

  5. Scrapy采集某小说网站的全部小说

    链接: https://pan.baidu.com/s/1hrgYDzhgQIDrf4KmZxhW1w 密码: h1m6 源码以及运行图

  6. 面试题之第一部分(Python基础篇) 80题

    第一部分(python基础篇)80题 为什么学习Python?==*== # 1. python应用于很多领域,比如后端,前端,爬虫,机器学习(人工智能)等方面,几乎能涵盖各个开发语言的领域,同时它相 ...

  7. 【转载】C#常用控件属性及方法介绍

    C#常用控件属性及方法介绍                                               目录 1.窗体(Form) 2.Label (标签)控件 3.TextBox(文 ...

  8. zabbix开启对中文的支持--&&--中文乱码解决方法

    zabbix不支持中文图 开启zabbix对中文的支持 原来zabbix默认把对中文的支持给关闭了,我们需要修改zabbix的php源文件. 修改站点根目录下include/locales.inc.p ...

  9. Linux下,Tomcat启动成功,发现ip:8080访问失败

    Linux下,Tomcat启动成功,发现ip:8080访问失败 Chasel_H 2018.04.23 20:47* 字数 195 阅读 566评论 0喜欢 3 相信很多人都和我一样,在Linux环境 ...

  10. mysql视图初探

    mysql视图初探 官方例子如下,从官方的例子就可以看出来视图就是提供一种快捷查询.用视图来查询一些常用的结果. mysql> help create view; Name: 'CREATE V ...