一、

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元素的一些样式的更多相关文章

  1. Jquery 获取屏幕及滑块及元素的高度及距离

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  2. 快速获取dom到body左侧和顶部的距离,简单粗暴无bug-getBoundingClientRect

    获取dom到body左侧和顶部的距离-getBoundingClientRect 平时在写js的时候,偶尔会需要用js来获取当前div到 body 左侧.顶部的距离.网上查一查,有很多都是通过offs ...

  3. JavaScript笔记03——文档对象模型(Document Object Model,简称DOM):获取HTML元素、操作HTML元素

    Dom技术使得用户页面可以动态地变化,如可以动态地显示或隐藏一个元素,改变它们的属性,增加一个元素等,Dom技术使得页面的交互性大大地增强.[1] DOM实际上是以面向对象方式描述的文档模型.DOM定 ...

  4. 读Zepto源码之操作DOM

    这篇依然是跟 dom 相关的方法,侧重点是操作 dom 的方法. 读Zepto源码系列文章已经放到了github上,欢迎star: reading-zepto 源码版本 本文阅读的源码为 zepto1 ...

  5. 框架操作DOM和原生js操作DOM比较

    问题引出 对于Angular和React操作DOM的速度,和原生js操作DOM的速度进行了一个比较: 一个同学做的demo 代码如下: <!DOCTYPE html> <html n ...

  6. 直接操作DOM一定比虚拟DOM操作耗时,diff算法,key值,虚拟 DOM的定义

    直接操作DOM一定比虚拟DOM操作耗时吗? 或者一次直接DOM操作一定比一次虚拟DOM操作耗时吗? 1)虚拟DOM的本质就是一个JS对象,虚拟DOM减少了真实DOM的操作,当修改数据的时候,就是修改虚 ...

  7. Selenium with Python 005 - 调用js操作页面元素

    WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...

  8. 获取DOM元素到页面顶部的距离,亲测有效版本(转载)

    原文:https://blog.csdn.net/u013764814/article/details/83825479 干脆点(博客就应该干脆,少扯皮) DOM元素有一个属性是offsetTop,表 ...

  9. JQ的offset().top与JS的getBoundingClientRect区别详解,JS获取元素距离视窗顶部可变距离

     壹 ❀ 引 我在 JQ的offset().top与js的offsetTop区别详解 这篇博客中详细分析了JQ方法offset().top与JS属性offsetTop的区别,并得出了一条offset( ...

随机推荐

  1. poi操作word,简单写docx

    参考博客: https://www.cnblogs.com/guilty/p/3977016.html 在HWPF中换行符是"\013",在XWPF中是run.addBreak() ...

  2. IntelliJ IDEA 17 创建maven项目

    参考博客: https://yq.aliyun.com/articles/111053# 部署服务器时  没有Tomcat Server选项

  3. Sessions 与Cookies详解

     一.Cookie 是什么? HTTP协议是无状态的,每一次数据交换完毕就结束,服务器端和客户端的链接就会关闭,每次交换数据都需要建立新的链接.例如:我逛淘宝买东西,我看上了易宝棒棒糖,而我下单的时候 ...

  4. 【logo】设计书籍的logo

    一个女孩发光般的看着,眼前发现的书籍 含义:这本书就是女孩想要得到的书籍 平台的宗旨:就是让学生能够得到想要的书籍 书籍来源:其他学生的书籍 目的:实现书籍回收再利用,同时让接受者低于市场价得到

  5. 【python之路18】内置函数,补充请看【python之路46】

    1.abs(number)表示某个数字的绝对值 print(abs(-123)) #打印出123 2.all(iterable) 表示可迭代的参数全部为True那么返回True,否则返回False r ...

  6. Vue--vue中常用的ECMAScript6语法

    1.对象的写法 es5中对象: {add:add,substrict:substrict} es6中对象: {add,substrict} 注意这种写法的属性名称和值变量是同一个名称才可以简写,否则要 ...

  7. LintCode刷题笔记-- BackpackIII

    标签:动态规划 问题描述: Given n items with size Ai and value Vi, and a backpack with size m. What's the maximu ...

  8. SDUT-3379_数据结构实验之查找七:线性之哈希表

    数据结构实验之查找七:线性之哈希表 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 根据给定的一系列整数关键字和素数p, ...

  9. 纯CSS3实现Metro Icon

    在线演示 本地下载

  10. iOS 停止不必要的UI动效设计

    http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有 ...