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。

posted @ 2019-10-28 15:10  面包不甜  阅读(20260)  评论(3编辑  收藏  举报