溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了微信小程序如何實現點擊滾動到指定位置，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
公司項目要做一個類似微信通訊錄導航的效果，點擊右側字母頁面滾動到相應位置。
因為微信小程序沒有dom概念，所以不能使用錨點，也不能直接獲取對應字母相對頁面的偏移位置。此時只能使用小程序創建對象實例的API獲取節點信息：
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.先創建節點對象，wx.createSelectorQuery()返回一個對象實例；
2.選擇顯示區域；
3.調用select方法，傳入節點的id值，可在同一節點對象進行多次調用，最后會返回數組結果（上圖中滾動區域距離頁面頂部是有兩個導航欄高度的距離的，所以查詢了兩次導航欄）；
4.exec()回調方法中可以獲取所查詢所有節點的信息，數組第一條為頁面的位置信息（滾動距離），獲取到對應字母節點的top值為節點相對于屏幕頂部的位置
結果：頁面滾動位置 = 頁面滾動距離 + 字母節點相對屏幕高度距離 - 頭部導航條高度 - 菜單欄高度
wx.pageScrollTo（）調用API頁面滾動
如果是讓滾動容器滾動到指定位置，計算位置會有一點不同：
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
})
});
上圖因為是彈出框里的內容，所以列表放在scroll-view滾動容器中，和上面不一樣的是滾動位置是：滾動容器距離頁面頂部距離 - 錨點距離頁面頂部距離，將計算后的偏移量修改至對應scroll-view容器的scroll-top屬性就行了。
以上就是關于微信小程序如何實現點擊滾動到指定位置的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
