每天一点点之 uni-app 框架开发 - 页面滚动到指定位置
项目需求:在页面中,不管位于何处,点击评论按钮页面滚动到对应到位置

实现思路如下:
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 框架开发 - 页面滚动到指定位置的更多相关文章
- 使用apicloud开发移动端APP,IOS list页面滚动卡顿解决记录
给内容容器添加样式:-webkit-overflow-scrolling:touch; -webkit-overflow-scrolling:属性控制元素在移动设备上是否使用滚动回弹效果. auto: ...
- ios开发之--令UITableView滚动到指定位置
这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...
- 【NX二次开发】Block UI 指定位置
属性说明 属性 类型 描述 常规 BlockID String 控件ID Enable Logical 是否可操作 Group ...
- hybrid App h5二级页面返回的时候保持与一级页面浏览的位置一致
最近在开发公司hybrid app的时候,需要将原本原生的配置中心模块统一变更为H5,做完之后从测试那里反馈回来这样一个问题,当滑到页面底部或中部的时候进入子页面进行设置,返回的时候页面应该定位到离开 ...
- 每天一点点之vue框架开发 - 引入Jquery
1. 安装jquery npm install jquery --save-dev 2.在build/webpack.base.conf.js中添加如下内容 var webpack = require ...
- 每天一点点之vue框架开发 - 使用vue-router路由
1.安装路由(安装过的跳过此步) // 进入项目根目录 cd frontend // 安装 npm install vue-router --save-dev 2.在入口文件main.js中引入路由 ...
- 上门洗车APP --- Androidclient开发 之 网络框架封装介绍(二)
上门洗车APP --- Androidclient开发 之 网络框架封装介绍(二) 前几篇博文中给大家介绍了一下APP中的基本业务及开发本项目使用的网络架构: 上门洗车APP --- Androidc ...
- 使用mui框架开发App,当input获取焦点时,键盘弹出,底部导航栏上升。
转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...
- MUI框架开发HTML5手机APP(二)--页面跳转传值&底部选项卡切换
概 述 JRedu 在上一篇博客中,我们学习了如何使用Hbuilder创建一个APP,同时如何使用MUI搭建属于自己的第一款APP,没有学习的同学可以戳链接学习: http://www.cnblo ...
随机推荐
- Linux命令:ss命令
ss功能:用来显示套接字信息的,类似于netstat,可以显示更多的信息,用于替代netstat. ss常用选项 ss -t:tcp协议的连接 -u:udp协议的链接 -w:裸套接字相关 -x:uni ...
- 一、log4j日志框架的理论和不同场景使用
1.日志框架: 工作中要进行Java输出日志时,你需要一个或者多个日志框架.框架能提供对象.方法和必要的配置来发送日志信息.Java语言本身有自带的日志实现包java.util.logging.还有很 ...
- Xcode 8 修改已创建工程的 organizion name
在创建工程时,会需要填写公司信息,对于已创建的工程,新建文件时,公司信息显示为刚开始创建的公司信息.如果需要对公司名称进行修改,需进行以下 可以 打开 工程名.xcodeproj 文件 (显示包内容) ...
- 「Luogu P2468 [SDOI2010]粟粟的书架」
这道题分为两个部分 Part1 前置芝士 前缀和(后缀和,二维前缀和):可以预处理一下数据. 二分查找:可以在较短的时间内找出答案. 具体做法 可以发现\(R,C\)不大,只有\(200\),于是可以 ...
- Intellij Idea 下包建包,无论怎么建都在同一级,已解决(附图)
1.很多新手,刚开始使用Intellij Idea的时候,项目建包都出现所建的包都在用一级. 2.这是因为,刚开始建项目的时候,Hide Empty Middle Packages是默认勾选的,只要去 ...
- 学习SpringMVC 文件上传 遇到的问题,403:returned a response status of 403 Forbidden ,409文件夹未找到
问题一: 409:文件夹没有创建好,找不到指定的文件夹,创建了即可. 问题二: 403:returned a response status of 403 Forbidden 我出现这个错误的原因是因 ...
- Flask 教程 第二十二章:后台作业
本文翻译自The Flask Mega-Tutorial Part XXII: Background Jobs 这是Flask Mega-Tutorial系列的第二十二部分,我将告诉你如何创建独立于W ...
- 10.MongoDB
1.安装(1.1):去官方下载最新的包,http://www.mongodb.org/downloads(1.2):然后tar zvxf 解压(1.3):拷贝到相应的文件夹即可2.在Shell里面启动 ...
- C#用SQLDMO操作数据库----转载
C#用SQLDMO操作数据库 sqldmo.dll是随sql server2000一起发布的.sqldmo.dll自身是一个com对象 sqldmo(sql distributed managemen ...
- mysql 索引优化法则
建表语句 CREATE TABLE staffs( id INT PRIMARY KEY AUTO_INCREMENT, NAME VARCHAR (24) NOT NULL DEFAULT '' C ...