每天一点点之 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 ...
随机推荐
- GET和POST面试知识点
导读:大部分APP都依赖于网络通信,对于开发者来说,基于网络通信的开发无疑是必须掌握的.HTTP通信作为目前计算机主要的通信协议,是企业面试当中必问的.对于HTTP通信的概念,本文不作说明,我将在后续 ...
- vue基础语法摘要
1. 2. 3. 4. 5. 6. 7.“动态路由”和“编程式路由”参数的接收方式:路由的参数-----页面之间跳转的参数
- Python 爬取 北京市政府首都之窗信件列表-[数据处理]
日期:2020.01.24 博客期:132 星期五 [代码说明,如果要使用此页代码,必须在本博客页面评论区给予说明] //博客总体说明 1.准备工作 2.爬取工作 3.数据处理(本期博客) 4.信息展 ...
- 本周总结(19年暑假)—— Part3
日期:2019.7.28 博客期:109 星期日 这几天要练车,嗯呢,但是对于分布式数据库的研究并没有停止!
- java-jpa-criteriaBuilder使用
一个复杂的查询例子(包含常用的所有查询方法) CriteriaBuilder criteriaBuilder = entityManager.getCriteriaBuilder(); //查询结果所 ...
- Spring mvc mybatis 查询结果缺少字段 解决方法
参考:https://blog.csdn.net/xiaofeifei8421/article/details/43231815
- Acwing779 最长公共字符串后缀
题目大意:给定n个字符串,让你找到他们的最长公共字符串后缀是什么,可能为空. 分析:题目数据范围比较小,可以O(n*n)暴力匹配,即可解决这道问题.之所以写这道题的题解还是因为写字符串的题还不够多啊, ...
- vim学习--usr03 moving around
Word movement 小写的"w""ge""e""b" w表示向后移动到一个单词开头 ge表示向前移动到一个单词末 ...
- Hystrix熔断机制导致误报请求超时错误
问题的过程如下: (1)前端向服务端请求往HBase插入1000条数据: (2)请求经路由网关Zuul传递给HBaseService,HBaseService执行插入操作: (3)插入操作需要的时间超 ...
- php:数据库封装类
<?phpclass DBDA{ public $host="localhost"; public $uid="root"; publi ...