小程序获取节点位置，页面定位处理

admin

<p>最近做商城，商品详情页都会有导航栏点击直接使页面滚动到想要指定的位置，尤其商品页很长的情况，这样就需要知道某个节点的位置。</p><p>用下边这个方法可以获取：</p><p><br/></p><p><img src="http://img.domystery.com/Mys/M00/07/B9/cxwu3l0UdeSAXlphAACZMDzDUOU416.png" title="1561621988562873.png" alt="image.png"/></p><p><br/></p><p><br/></p><p><span style="color: #569cd6;">var</span> query <span style="color: #dcdcdc;">=</span> wx<span style="color: #dcdcdc;">.</span>createSelectorQuery<span style="color: #dcdcdc;">();</span></p><p>query<span style="color: #dcdcdc;">.</span>select<span style="color: #dcdcdc;">(</span><span style="color: #ce9178;">&#39;#container&#39;</span><span style="color: #dcdcdc;">).</span>boundingClientRect<span style="color: #dcdcdc;">();</span></p><p>query<span style="color: #dcdcdc;">.</span>select<span style="color: #dcdcdc;">(</span><span style="color: #ce9178;">&#39;#tj&#39;</span><span style="color: #dcdcdc;">).</span>boundingClientRect<span style="color: #dcdcdc;">();</span></p><p>query<span style="color: #dcdcdc;">.</span>select<span style="color: #dcdcdc;">(</span><span style="color: #ce9178;">&#39;#productview&#39;</span><span style="color: #dcdcdc;">).</span>boundingClientRect<span style="color: #dcdcdc;">();</span></p><p>query<span style="color: #dcdcdc;">.</span>exec<span style="color: #dcdcdc;">(</span><span style="color: #569cd6;">function</span><span style="color: #dcdcdc;">(</span>res<span style="color: #dcdcdc;">)</span> <span style="color: #dcdcdc;">{</span></p><p><span style="color: #569cd6;">if</span> <span style="color: #dcdcdc;">(</span>res<span style="color: #dcdcdc;">[</span><span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">].</span>bottom <span style="color: #dcdcdc;">&gt;</span> <span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">)</span> <span style="color: #dcdcdc;">{</span></p><p>that<span style="color: #dcdcdc;">.</span>setData<span style="color: #dcdcdc;">({</span></p><p>swiperheight<span style="color: #dcdcdc;">:</span> res<span style="color: #dcdcdc;">[</span><span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">].</span>bottom<span style="color: #dcdcdc;">,</span></p><p><span style="color: #dcdcdc;">})</span></p><p><span style="color: #dcdcdc;">}</span></p><p><span style="color: #569cd6;">if</span> <span style="color: #dcdcdc;">(</span>res<span style="color: #dcdcdc;">[</span><span style="color: #b5cea8;">1</span><span style="color: #dcdcdc;">].</span>bottom <span style="color: #dcdcdc;">&gt;</span> <span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">)</span> <span style="color: #dcdcdc;">{</span></p><p>that<span style="color: #dcdcdc;">.</span>setData<span style="color: #dcdcdc;">({</span></p><p>tjposition<span style="color: #dcdcdc;">:</span> res<span style="color: #dcdcdc;">[</span><span style="color: #b5cea8;">1</span><span style="color: #dcdcdc;">].</span>bottom <span style="color: #dcdcdc;">+</span> res<span style="color: #dcdcdc;">[</span><span style="color: #b5cea8;">1</span><span style="color: #dcdcdc;">].</span>height<span style="color: #dcdcdc;">,</span></p><p><span style="color: #dcdcdc;">})</span></p><p><span style="color: #dcdcdc;">}</span></p><p><span style="color: #569cd6;">if</span> <span style="color: #dcdcdc;">(</span>res<span style="color: #dcdcdc;">[</span><span style="color: #b5cea8;">2</span><span style="color: #dcdcdc;">].</span>top <span style="color: #dcdcdc;">&gt;</span> <span style="color: #b5cea8;">0</span><span style="color: #dcdcdc;">)</span> <span style="color: #dcdcdc;">{</span></p><p>that<span style="color: #dcdcdc;">.</span>setData<span style="color: #dcdcdc;">({</span></p><p>detailposition<span style="color: #dcdcdc;">:</span> res<span style="color: #dcdcdc;">[</span><span style="color: #b5cea8;">2</span><span style="color: #dcdcdc;">].</span>top<span style="color: #dcdcdc;">,</span></p><p><span style="color: #dcdcdc;">})</span></p><p><span style="color: #dcdcdc;">}</span></p><p><span style="color: #dcdcdc;">})</span></p><p><br/></p><p>创建selector之后，为想要到的位置进行id绑定及select查询节点信息<br/></p><p>很简单，多个select由一个exec集中处理，完事循环拿到每个select节点的位置数据，包括top，bottom，height数据</p><p>想要滚动到某个节点的头位置就用top，尾位置就用bottom</p><p><br/></p><p>另外注意的是，为了拿到准确的节点数据，把获取位置的处理放在onReady()方法中，这样待页面加载之后，这些节点的数据就对了。</p><p><br/></p><p>附页面滚动到指定位置代码：</p><p>wx<span style="color: #dcdcdc;">.</span>pageScrollTo<span style="color: #dcdcdc;">({</span></p><p>scrollTop<span style="color: #dcdcdc;">:</span> <span style="color: #569cd6;">this</span><span style="color: #dcdcdc;">.</span>data<span style="color: #dcdcdc;">.</span>detailposition</p><p><span style="color: #dcdcdc;">})</span></p><p><br/></p>

zoroseo2020

啥按个啊是发个公司大股东非固定盖板打开过哪里打开固定放开那个路口彩票哪里看哪个理科女生看两福彩双色球个奴隶少女老师那里还能弄好了思路和幸运飞艇你说了看到你浪费了给你说了的可能离开谁对你好的哈；还是电脑坏了可能是登录河南省来得快年历史的你好可怜迪士尼