uni-app获取dom元素到顶部的距离以及操作dom元素的一些样式
<p><span style="font-size: 18px">一、</span></p><p>1、首先有一个元素</p>
<div class="cnblogs_code">
<pre><view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">activity</span><span style="color: rgba(128, 0, 0, 1)">"</span> <span style="color: rgba(0, 0, 255, 1)">ref</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">btn</span><span style="color: rgba(128, 0, 0, 1)">"</span>></view></pre>
</div>
<p>2、确认指针指向</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.$refs.btn.$el.getBoundingClientRect()</pre>
</div>
<p>https://developer.mozilla.org/zh-CN/docs/Web/API/Element/getBoundingClientRect</p>
<p>例：</p>
<p><img src="https://img2018.cnblogs.com/blog/1777096/201910/1777096-20191028150349234-1983697110.jpg" alt=""></p>
<p>打印出：</p>
<p><img src="https://img2018.cnblogs.com/blog/1777096/201910/1777096-20191028150446176-897818635.jpg" alt=""></p>
<p>可获得 用于描述边框的只读属性——<strong><span style="color: rgba(255, 102, 0, 1)">left、top、right、bottom</span></strong>等，单位为像素。除了 width 和 height 外的属性都是相对于视口的左上角位置而言的。</p>
<p>操作样式：</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">this</span>.$refs.btn.$el.style.position = <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(128, 0, 0, 1)">fixed</span><span style="color: rgba(128, 0, 0, 1)">'</span>
<span style="color: rgba(0, 0, 255, 1)">this</span>.$refs.btn.$el.style.top = <span style="color: rgba(128, 0, 128, 1)">0</span>;</pre>
</div>
<p><span style="font-size: 18px">二、</span></p>
<p>如果想要滚动到指定位置</p>
<p>1、首先有一个元素</p>
<div class="cnblogs_code">
<pre><view <span style="color: rgba(0, 0, 255, 1)">class</span>=<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">sticke</span><span style="color: rgba(128, 0, 0, 1)">"</span>></view></pre>
</div>
<div class="cnblogs_code">
<pre>uni.createSelectorQuery().<span style="color: rgba(0, 0, 255, 1)">select</span>(<span style="color: rgba(128, 0, 0, 1)">"</span><span style="color: rgba(128, 0, 0, 1)">.sticke</span><span style="color: rgba(128, 0, 0, 1)">"</span>).boundingClientRect((res)=><span style="color: rgba(0, 0, 0, 1)">{
uni.pageScrollTo({
duration:</span><span style="color: rgba(128, 0, 128, 1)">0</span><span style="color: rgba(0, 0, 0, 1)">,
scrollTop:</span><span style="color: rgba(128, 0, 128, 1)">800</span><span style="color: rgba(0, 0, 0, 1)">
})
}).exec()<br></span></pre>
</div>
<p>使用 <span style="color: rgba(255, 102, 0, 1)"><strong>uni.createSelectorQuery</strong> </span>方法查找元素，使用 <strong><span style="color: rgba(255, 102, 0, 1)"> uni.pageScrollTo</span></strong> 方法使其滚动到相应位置（scrollTop），</p>
<p>duration 在我使用过程中，设置除0以外其他数字均在第一次滚动后报错，所以最好还是设置为0。</p><br><br>
来源：https://www.cnblogs.com/angenstern/p/11752432.html
頁:
[1]