一、

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. Java是如何实现跨平台的

    一.Java是如何实现跨平台的 1.我们编写的Java源码,编译后会生成一种 .class 文件,称为字节码文件 2.Java虚拟机JVM就是负责将字节码文件翻译成特定平台下的机器码然后运行.也就是说 ...

  2. JAVA读取文件操作时路径的斜杠问题

    java中的路径一般用"/"windows中的路径用"\"linux,unix中的路径一般用"/"其中java中"/"等 ...

  3. io.spring.platform继承方式和import方式更改依赖版本号的问题

    使用io.spring.platform时,它会管理各类经过集成测试的依赖版本号. 但有的时候,我们想使用指定的版本号,这个时候就需要去覆盖io.spring.platform的版本号. 前面的文章总 ...

  4. 2019.9.17 csp-s模拟测试45 反思总结

    来了来了,垃圾二连.[指两次发博客] 看了一下题就匆匆回去上课,在课上一边听课一边水oi,大概用1h40min的时间想完三道题.最后回到机房只剩下40min的时间敲代码,于是T1骗了70分就走了… 这 ...

  5. SQL Server 存储过程详解

    转自:https://blog.csdn.net/younghaiqing/article/details/62884658 一. 什么是存储过程 系统存储过程是系统创建的存储过程,目的在于能够方便的 ...

  6. Sql server定时执行某个sql 通过Windows 计划任务(非代理Job方式)

    建立 bat文件.内容如下: osql -s "xxx.xxx.xx.x" -U sa -P sa -d DB -i TruncateSql.sql osql -S "l ...

  7. Android原生调用mui里面的js如何实现

    遍历所有运行中的webview页面,采用自带的SDK方法进行获取所有的IWebview.MUI中自带的webview是一个IWebviewArrayList<IWebview> webli ...

  8. vue的table组件

    一个vue-table的组件 说明: 1.基于element-ui开发的vue表格组件. 功能: 1.支持树形数据的展示 2.行拖拽排序 3.单元格拖拽排序 github 使用方法: 1.下载npm包 ...

  9. [Vue CLI 3] 配置解析之 css.extract

    大家还记得我们在老版本中,对于线上环境配置中会把所有的 css 多打成一个文件: 核心是使用了插件 extract-text-webpack-plugin,方式如下: 第一步都是加载插件 const ...

  10. day38 18-Spring的XML和注解的结合使用

    什么情况下使用XML,什么情况下使用注解?又有XML,又有注解,开发的时候使用哪种? XML:结构清晰,配置麻烦. 注解:简单, 它俩的结合点在属性注入上. 两种方式结合:一般使用XML注册Bean, ...