公司項(xiàng)目要做一個(gè)類似微信通訊錄導(dǎo)航的效果，點(diǎn)擊右側(cè)字母頁(yè)面滾動(dòng)到相應(yīng)位置。

因?yàn)槲⑿判〕绦驔]有dom概念，所以不能使用錨點(diǎn)，也不能直接獲取對(duì)應(yīng)字母相對(duì)頁(yè)面的偏移位置。此時(shí)只能使用小程序創(chuàng)建對(duì)象實(shí)例的API獲取節(jié)點(diǎn)信息：

let query = wx.createSelectorQuery().in(this);
query.selectViewport().scrollOffset()
query.select("#Nav").boundingClientRect();
query.select("#FilterNav").boundingClientRect();
query.select("#"+((letter=='#')?'other':letter)).boundingClientRect();
query.exec(function (res) {
  let scrollTop = 0;
  if(res[3]){
   scrollTop = res[0].scrollTop + res[3].top
  }else{
   scrollTop = res[0].scrollTop;
  }
  wx.pageScrollTo({
    scrollTop: scrollTop - res[1].height - res[2].height,
    duration: 300
  });
});

解釋一下該代碼的意思：

1.先創(chuàng)建節(jié)點(diǎn)對(duì)象，wx.createSelectorQuery()返回一個(gè)對(duì)象實(shí)例；

2.選擇顯示區(qū)域；

3.調(diào)用select方法，傳入節(jié)點(diǎn)的id值，可在同一節(jié)點(diǎn)對(duì)象進(jìn)行多次調(diào)用，最后會(huì)返回?cái)?shù)組結(jié)果（上圖中滾動(dòng)區(qū)域距離頁(yè)面頂部是有兩個(gè)導(dǎo)航欄高度的距離的，所以查詢了兩次導(dǎo)航欄）；

4.exec()回調(diào)方法中可以獲取所查詢所有節(jié)點(diǎn)的信息，數(shù)組第一條為頁(yè)面的位置信息（滾動(dòng)距離），獲取到對(duì)應(yīng)字母節(jié)點(diǎn)的top值為節(jié)點(diǎn)相對(duì)于屏幕頂部的位置

結(jié)果：頁(yè)面滾動(dòng)位置 = 頁(yè)面滾動(dòng)距離 + 字母節(jié)點(diǎn)相對(duì)屏幕高度距離 - 頭部導(dǎo)航條高度 - 菜單欄高度

wx.pageScrollTo（）調(diào)用API頁(yè)面滾動(dòng)

如果是讓滾動(dòng)容器滾動(dòng)到指定位置，計(jì)算位置會(huì)有一點(diǎn)不同：

var query = wx.createSelectorQuery().in(this);
query.select("#swiper").boundingClientRect();
query.select("#"+ letter).fields({ rect:true,scrollOffset:true });
query.selectViewport().scrollOffset()
query.exec((res)=>{
 _this.setData({
   letterScrolltop: res[1].top - res[0].top
 })
});  

上圖因?yàn)槭菑棾隹蚶锏膬?nèi)容，所以列表放在scroll-view滾動(dòng)容器中，和上面不一樣的是滾動(dòng)位置是：滾動(dòng)容器距離頁(yè)面頂部距離 - 錨點(diǎn)距離頁(yè)面頂部距離，將計(jì)算后的偏移量修改至對(duì)應(yīng)scroll-view容器的scroll-top屬性就行了。

到此這篇關(guān)于微信小程序點(diǎn)擊滾動(dòng)到指定位置的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)小程序點(diǎn)擊滾動(dòng)到指定位置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論