uniapp获取元素到顶部的距离

1 通过unicreateSelectorQuery() 来实现，

注意：要获得的高度，是在页面上dom已经渲染完成之后才能获得

我使用的是页面生命周期  onReady()中调用的

                let _this = this;

                const query = unicreateSelectorQuery()

                 queryselect('#tab')boundingClientRect()

                   queryselectViewport()scrollOffset()

                    queryexec(function(res){

                        debugger

                       // res[0]top      // #tab节点的上边界坐标

                        // res[1]scrollTop // 显示区域的竖直滚动位置

                        _thisheight=resuwindowHeight-res[0]top +'px'

                        consolelog('高度',res[0]height);

                        consolelog('demo的元素的信息',res);

                    })

我是用于实现页面滚动后把列表的导航条吸附在顶部，在微信小程中使用有效，在app端使用这个方法不能获取到距离顶部的高度，只有demo元素的信息

原因：

1、uni-app不支持页面刷新时重新获取code，所以可能会出现刷新之后code获取失败的情况。

2、需要在uni-app的跳转链接中添加code参数，让uni-app在页面跳转的时候带上code信息，刷新页面时不会重新获取code。

3、如果想要在uni-app中重新获取code，可以使用uninavigateTo来进行页面跳转，这时会默认携带code信息。

uniapp跟原生js创建元素步骤：

1、使用documentcreateElement()方法或者字符串拼接的方式来创建元素。

2、将创建的元素添加到指定的父节点上。

appid,服务器域名（域名下的资源文件要能访问，跟后端沟通，先放个html文件进去，比如： = '>

就是小程序上方由胶囊占据的bar，就叫titleBar。

因为我们可以在胶囊左侧写标题和其他一些东西。这些东西要跟胶囊中线对齐。

首先我们要撑起statusBar的高度，也就是最顶部的那个bar。这个bar的高度很容易取得。

unigetMenuButtonBoundingClientRect()top取得的是胶囊距离视口顶部的距离，减掉statusBar的高度，就是胶囊离statusBar下沿的距离。这个距离乘以2，加上胶囊自身高度，就是titleBar的高度。

见红色部分。

开发者工具中会有略微错位，无妨，以真机为准。

我们希望胶囊左侧空白区域与胶囊有间距，而且间距最好是等于胶囊到右边边线的距离。这个前提下，左侧空白区域的宽度怎么算？

写成组件就是这样：

用法：

演示如何使用作用域插槽：

以上就是关于uniapp获取元素到顶部的距离全部的内容，包括:uniapp获取元素到顶部的距离、uniapp刷新页面不会重新获取code、uniapp怎么实现跟原生js创建元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！