微信小程序點擊滾動到指定位置的實現(xiàn)
公司項目要做一個類似微信通訊錄導(dǎo)航的效果,點擊右側(cè)字母頁面滾動到相應(yīng)位置。
因為微信小程序沒有dom概念,所以不能使用錨點,也不能直接獲取對應(yīng)字母相對頁面的偏移位置。此時只能使用小程序創(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.調(diào)用select方法,傳入節(jié)點的id值,可在同一節(jié)點對象進行多次調(diào)用,最后會返回數(shù)組結(jié)果(上圖中滾動區(qū)域距離頁面頂部是有兩個導(dǎo)航欄高度的距離的,所以查詢了兩次導(dǎo)航欄);
4.exec()回調(diào)方法中可以獲取所查詢所有節(jié)點的信息,數(shù)組第一條為頁面的位置信息(滾動距離),獲取到對應(yīng)字母節(jié)點的top值為節(jié)點相對于屏幕頂部的位置
結(jié)果:頁面滾動位置 = 頁面滾動距離 + 字母節(jié)點相對屏幕高度距離 - 頭部導(dǎo)航條高度 - 菜單欄高度
wx.pageScrollTo()調(diào)用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 }) });
上圖因為是彈出框里的內(nèi)容,所以列表放在scroll-view滾動容器中,和上面不一樣的是滾動位置是:滾動容器距離頁面頂部距離 - 錨點距離頁面頂部距離,將計算后的偏移量修改至對應(yīng)scroll-view容器的scroll-top屬性就行了。
到此這篇關(guān)于微信小程序點擊滾動到指定位置的實現(xiàn)的文章就介紹到這了,更多相關(guān)小程序點擊滾動到指定位置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法
這篇文章主要介紹了ff chrome和ie下全局動態(tài)定位的異同及全局高度的取法,需要的朋友可以參考下2014-06-06Three.js實現(xiàn)3D乒乓球小游戲(物理效果)
本文將使用React Three Fiber 和 Cannon.js 來實現(xiàn)一個具有物理特性的乒乓球小游戲,使用 React Three Fiber 搭建基礎(chǔ)三維場景、如何使用新技術(shù)棧給場景中對象的添加物理特性等,最后利用上述知識點,將開發(fā)一個簡單的乒乓球小游戲,需要的朋友可以參考下2023-03-03IE中radio 或checkbox的checked屬性初始狀態(tài)下不能選中顯示問題
checked屬性在IE下不能正確實現(xiàn)的問題2009-07-07用js實現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面
用js實現(xiàn)判斷當(dāng)前網(wǎng)址的來路如果不是指定的來路就跳轉(zhuǎn)到指定頁面,需要的朋友可以參考下。2011-05-05