uni-app获取dom元素到顶部的距离以及操作dom元素的一些样式
一、
1、首先有一个元素
<view class="activity" ref="btn"></view>
2、确认指针指向
this.$refs.btn.$el.getBoundingClientRect()
https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect
例:

打印出:

可获得 用于描述边框的只读属性——left、top、right、bottom等,单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。
操作样式:
this.$refs.btn.$el.style.position = 'fixed'
this.$refs.btn.$el.style.top = ;
二、
如果想要滚动到指定位置
1、首先有一个元素
<view class="sticke"></view>
uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{
uni.pageScrollTo({
duration:,
scrollTop:
})
}).exec()
使用 uni.createSelectorQuery 方法查找元素,使用 uni.pageScrollTo 方法使其滚动到相应位置(scrollTop),
duration 在我使用过程中,设置除0以外其他数字均在第一次滚动后报错,所以最好还是设置为0。
uni-app获取dom元素到顶部的距离以及操作dom元素的一些样式的更多相关文章
- Jquery 获取屏幕及滑块及元素的高度及距离
alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...
- 快速获取dom到body左侧和顶部的距离,简单粗暴无bug-getBoundingClientRect
获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候,偶尔会需要用js来获取当前div到 body 左侧.顶部的距离.网上查一查,有很多都是通过offs ...
- JavaScript笔记03——文档对象模型(Document Object Model,简称DOM):获取HTML元素、操作HTML元素
Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定 ...
- 读Zepto源码之操作DOM
这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...
- 框架操作DOM和原生js操作DOM比较
问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...
- 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义
直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...
- Selenium with Python 005 - 调用js操作页面元素
WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...
- 获取DOM元素到页面顶部的距离,亲测有效版本(转载)
原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...
- JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离
壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...
随机推荐
- linux 下建立桌面快捷方式
这段时间从windows转到了Linux,发现桌面上没有快捷方式很不适应,找了好久资料,找到解决方法,记录下来以后备用 1.首先建立一个新文件 ``` vi quick.desktop //后缀为de ...
- 使用Spring Cache + Redis + Jackson Serializer缓存数据库查询结果中序列化问题的解决
应用场景 我们希望通过缓存来减少对关系型数据库的查询次数,减轻数据库压力.在执行DAO类的select***(), query***()方法时,先从Redis中查询有没有缓存数据,如果有则直接从Red ...
- Codevs2490 导弹防御塔
2490 导弹防御塔 2490 导弹防御塔 时间限制: 1 s 空间限制: 64000 KB 题目等级 : 大师 Master 题目描述 Description Freda的城堡—— ...
- javascript控件开发之滚动条控件
首先,基于行前几篇开发的的框架,我们在目录 component\ui\下添加文件 com.ui.scrollBar.js, 在文件中定义com.ui.scrollBar类,继承com.ui.windo ...
- 用两个栈实现队列功能【剑指offer】
题目描述: 用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型. 程序代码: [方法一] class Solution { public: void push(int ...
- Handling Missing Values
1) A Simple Option: Drop Columns with Missing Values 如果这些列具有有用信息(在未丢失的位置),则在删除列时,模型将失去对此信息的访问权限. 此外, ...
- DFA算法实现敏感词过滤
DFA算法:即确定有穷自动机,简单点说就是,它是是通过event和当前的state得到下一个state,即event+state=nextstate.理解为系统中有多个节点,通过传递进入的event, ...
- 集合-Map 接口
1. 概述 java.util.Map <K,V>接口是一个顶层接口,里面存放的数据单元是:单对元素: K 表示 描述的键 的类型,Key 的类型: V 表示 描述的值 的类型,Val ...
- freemarker 取值(插值)(转)
Java数据模型 1)基本数据类型取值 八种基本的java类型:byte.short.int.long:float,double:char:boolean 对应的封装类型:Byte.Short.Int ...
- JavaScript:利用递归实现对象深拷贝
先来普及一下深拷贝和浅拷贝的区别浅拷贝:就是简单的复制,用等号即可完成 let a = {a: 1} let b = a 这就完成了一个浅拷贝但是当修改对象b的时候,我们发现对象a的值也被改变了 b. ...