每天一点点之 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 ...
随机推荐
- java 中类加载器
jar 运行过程和类加载机制有关,而类加载机制又和我们自定义的类加载器有关,现在我们先来了解一下双亲委派模式. java 中类加载器分为三个: BootstrapClassLoader 负责加载 ${ ...
- 微信小程序表单弹窗实例
开发中有时候会碰到需要一个表单弹窗来处理数据的提交处理,然后这次发布的这套源码就是解决这个问题! <!--button--> <view class="btn" ...
- SpringSecurity-权限关联与控制
6.3 服务器端方法级权限控制 在服务器端我们可以通过Spring security提供的注解对方法来进行权限控制.Spring Security在方法的权限控制上 支持三种类型的注解,JSR-250 ...
- ImageSwitcher和GridView的案例开发
(一)ImageSwitcher之手机相册的滑动查看 首先在布局文件上加一个ImageSwitcher,设置它的宽度和高度为match_parent. 在主程序中:首先设置一个存储照片资源的数组,在设 ...
- alert \ confirm \ prompt
alert() : 会将()中的内容弹出,返回的是()中的内容值,也就是字符串值 confirm :需要用户点击 "确定" 或 "取消" ,若用户点击 ”确定“ ...
- Lamda表达式学习笔记二
Lamda表达式学习笔记二 lamda表达式----方法引用 上一篇讲到Lamda体就是对函数式接口方法的实现 ,在方法体中我们可能会引用其他方法实现逻辑,所以在lamda体中我们可以直接引用器方法 ...
- Java 对不同类型的数据文件的读写操作整合器[JSON,XML,CSV]-[经过设计模式改造](2020年寒假小目标03)
日期:2020.01.16 博客期:125 星期四 我想说想要构造这样一个通用文件读写器确实不容易,嗯~以后会添加更多的文件类型,先来熟悉一下文件内容样式: <?xml version=&quo ...
- ORACLE 用32進制表示月中的一天
WHEN 'YMD' THEN v_year := to_char(SYSDATE, 'Y'); v_month := FN_CONVERT_DECIM ...
- C# Stream篇(—) -- Stream基类
写在前头: Stream系列文章共收录7篇,本着备忘和归纳的目的本着备忘和归纳的目的,全部收录于本分类中. 下面是有原文连接,望各位看官还是到原作者处学习,毕竟CV过来的文字难免有走样之处. 原始连接 ...
- java课堂第一次随机测试和课件课后动手动脑问题解决(2019-9-16 )
一.课堂测试 1.课堂测试:花二十分钟写一个能自动生成30道小学四则运算题目的 “软件” 要求 (1)减法结果不能为负数 (2)乘法结果不得超过一百,除法结果必须为整数 (3)题目避免重复: (4)可 ...