微信小程序點擊滾動到指定位置的實現(xiàn)
公司項目要做一個類似微信通訊錄導航的效果，點擊右側字母頁面滾動到相應位置。
因為微信小程序沒有dom概念，所以不能使用錨點，也不能直接獲取對應字母相對頁面的偏移位置。此時只能使用小程序創(chuàng)建對象實例的API獲取節(jié)點信息：
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é)點對象，wx.createSelectorQuery()返回一個對象實例；
2.選擇顯示區(qū)域；
3.調用select方法，傳入節(jié)點的id值，可在同一節(jié)點對象進行多次調用，最后會返回數(shù)組結果（上圖中滾動區(qū)域距離頁面頂部是有兩個導航欄高度的距離的，所以查詢了兩次導航欄）；
4.exec()回調方法中可以獲取所查詢所有節(jié)點的信息，數(shù)組第一條為頁面的位置信息（滾動距離），獲取到對應字母節(jié)點的top值為節(jié)點相對于屏幕頂部的位置
結果：頁面滾動位置 = 頁面滾動距離 + 字母節(jié)點相對屏幕高度距離 - 頭部導航條高度 - 菜單欄高度
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屬性就行了。
到此這篇關于微信小程序點擊滾動到指定位置的實現(xiàn)的文章就介紹到這了,更多相關小程序點擊滾動到指定位置內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要給大家講解了如何通過three.js實現(xiàn)3D影院的功能以及原理分析，需要的朋友參考一下吧。2017-12-12
這篇文章主要為大家詳細介紹了Bootstrap學習筆記之環(huán)境配置的具體操作方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
javascript removeChild 導致的內存泄漏
最近看到司徒正美的一篇文章《移除DOM節(jié)點》，文中說到在IE中移除容器類節(jié)點，會引起內存泄露。2010-08-08
這幾天在做一個文件管理的模塊，里面有排序的功能，產品經理看了說希望能做出更加智能的文件排序功能，就像是win7的名稱排序一樣，主要就是文件名中的數(shù)字會按大小排序，而不是直接按ascii碼 ,這兩天晚上沒事，就先寫了這個排序方法，下個版本中就可以用上了2010-08-08
今天遇到一個問題，這個問題也是我以前遇到的問題，以前的方式，也是大多數(shù)人使用的方式。大家可以看看我的文章2012-06-06
這篇文章主要介紹了JS在可編輯的div中的光標位置插入內容的方法,分別用js與jQuery兩種方式加以實現(xiàn),是非常實用的特效技巧,需要的朋友可以參考下2014-11-11
Javascript ParentNode和ChildNode接口原理解析
這篇文章主要介紹了Javascript ParentNode和ChildNode接口原理解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-03-03
SOSO地圖想必大家都知道吧，本文將為大家詳細介紹下使用JS畫出標注和中心點,直接貼出代碼，感興趣的朋友可以參考下2013-08-08
本文主要介紹了webpack熱更新的原理及實現(xiàn),,無需完全刷新整個頁面的同時,更新代碼變動的模塊,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-06-06
如果某元素定義了事件A，如click事件，如果觸發(fā)了事件之后，沒有阻止冒泡事件，那么事件將向父級元素傳播2014-03-03