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 = 0;

二、

如果想要滚动到指定位置

1、首先有一个元素

<view class="sticke"></view>

uni.createSelectorQuery().select(".sticke").boundingClientRect((res)=>{
    uni.pageScrollTo({
        duration:0,
        scrollTop:800
    })
}).exec()

使用 uni.createSelectorQuery 方法查找元素，使用  uni.pageScrollTo 方法使其滚动到相应位置（scrollTop），

duration 在我使用过程中，设置除0以外其他数字均在第一次滚动后报错，所以最好还是设置为0。

来源：https://www.cnblogs.com/angenstern/p/11752432.html