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

实现思路如下:

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. C/C++ — CreateThread 相关 API

    使用互斥对象: #include <windows.h> #include <iostream> #define THREADCOUNT 6 HANDLE ghMutex; D ...

  2. ES6新语法概览

    简介 ES6是JavaScript语言的新一代标准,加入了一些新的功能和语法,正式发布于2015年6月,亦称ES2015:该标准由ECMA(欧洲计算机制造联合会)的第39号技术专家委员会(TC39)制 ...

  3. Golang gin框架学习

    今天开始学习gin框架,在Github上找的示例的go-gin-example, 进度 日期 进展 疑惑 进展 1.30 下拉代码,初步了解gin的介绍.搭建 .mod文件 module原理.使用方法 ...

  4. 微信红包系统设计 & 优化

    微信红包系统设计 & 优化 浏览次数:151次 腾讯大讲堂 2015年04月02日 字号: 大 中 小 分享到:QQ空间新浪微博腾讯微博人人网豆瓣网开心网更多0   编者按:经过2014年一年 ...

  5. redis的并发set

    1.Redis高并发的问题 Redis缓存的高性能有目共睹,应用的场景也是非常广泛,但是在高并发的场景下,也会出现问题:缓存击穿.缓存雪崩.缓存和数据一致性,以及今天要谈到的缓存并发竞争. 这里的并发 ...

  6. 视图家族 & 路由组件

    目录 视图家族 & 路由组件 视图集与路由组件 基于 GenericAPIView 的十大接口 基于 generics 包下工具视图类的六大基础接口 视图集 路由组件:必须配合视图集使用 自定 ...

  7. PaperReading20200222

    CanChen ggchen@mail.ustc.edu.cn   VS-GAE Motivation: With the publication of NAS101, researchers can ...

  8. Python学习笔记001

    二进制 换算: 十进制转二进制 除二取余,然后倒序排列,高位补零. 将正的十进制数除以二,得到的商再除以二,依次类推知道商为零或一时为止,然后在旁边标出各步的余数,最后倒着写出来,高位补零就可以. 二 ...

  9. oracle jobs查看 sql及创建 jobs

    1.查看所有的 jobs select t.* from user_jobs t 2.创建 jobs declare job_id   pls_integer; begin sys.dbms_job. ...

  10. Day9 - G - Doing Homework HDU - 1074

    有n个任务,每个任务有一个截止时间,超过截止时间一天,要扣一个分.求如何安排任务,使得扣的分数最少.Input有多组测试数据.第一行一个整数表示测试数据的组数第一行一个整数n(1<=n<= ...