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

实现思路如下:

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. js 判断时间大小

    //判断结束时间一定要大于开始时间 function comparativeTime(){ var isok=true; //早餐配送时间 var breakfastScanTimeMin = $(& ...

  2. linux 部署java 项目命令

    1:服务器部署路径:/home/tomcat/tomcat/webapps  (用FTP工具链接服务器把包上传到此目录) 2:进入项目文件夹 cd /home/tomcat/tomcat/webapp ...

  3. yolo系列目标检测+自标注数据集进行目标识别

    1. yolov1的识别原理 参考:https://blog.csdn.net/u010712012/article/details/85116365 https://blog.csdn.net/gb ...

  4. iOS项目Info.plist中关键字汇总

    1. Application does not run in background (键名:UIApplicationExistsOnSuspend) 自从iOS4.0之后,当你在应用程序执行的时候按 ...

  5. python面向对象之练习题1

    定义管理员类,管理员有属性(name,password),可以创建学校.创建课程.创建老师 定义老师类,老师有属性(name,password),可以添加课程.给学生打分,但发现学生没有购买课程时,不 ...

  6. 论文写作+gnuplot制图

    一:论文写作 论文写作推荐使用LATEX+TEXStudio+TEXLive 1.CTeX官方网站:http://www.ctex.org/HomePage ,他类似于python环境 2.TeXst ...

  7. 产品降价、AR技术、功能降级,库克和苹果还有哪些底牌可以打?

    经过十年的高速发展,苹果和iPhone迎来了拐点,他们去年的境况,也连累了一大批的供应商,但如今的苹果财务健康,产业链稳固,在面对经济寒冬和激烈竞争的时候,有很多牌可以打,而且常常会在关键时刻打出来, ...

  8. 六 Hibernate多表操作&级联&外键维护

    Hibernate的一对多关联映射 Hibernate的多对多关联映射 数据库表与表之间的关系:一对多,多对多,一对一 一对多:一个部门对应多个员工,一个员工只能属于一个部门.一个客户对应多个联系人, ...

  9. JuJu团队1月9号工作汇报

    JuJu团队1月9号工作汇报 JuJu   Scrum 团队成员 今日工作 剩余任务 困难 飞飞 将示例程序打包成exe 将crossentrophy和softmax连接起来 无 婷婷 -- 完善ma ...

  10. java 十大经典排序算法

    十大排序算法可以说是每个程序员都必须得掌握的了,花了一天的时间把代码实现且整理了一下,为了方便大家学习,我把它整理成一篇文章,每种算法会有简单的算法思想描述,为了方便大家理解,我还找来了动图演示:这还 ...