天天一點點之 uni-app 框架開發 - 頁面滾動到指定位置

 

項目需求：在頁面中，無論位於何處，點擊評論按鈕頁面滾動到對應到位置

 

實現思路以下：

uni.createSelectorQuery().select(".comment").boundingClientRect((res)=>{
        uni.pageScrollTo({
            duration:0,
            scrollTop:res.top
        })
}).exec();

可是你會發現，在頁面沒有滾動以前點擊評論按鈕能夠直接滾動到評論，若是我頁面有滾動，滾動距離就會出現誤差

 

這是由於滾動到實際距離是元素距離頂部的距離減去最外層盒子的滾動距離，相關代碼以下：

uni.createSelectorQuery().select(".image-details").boundingClientRect(data=>{
    uni.createSelectorQuery().select(".comment").boundingClientRect((res)=>{
        uni.pageScrollTo({
            duration:0,
            scrollTop:res.top - data.top
        })
    }).exec()
}).exec();

 

 

相關連接：

　　官方獲取節點信息：https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery