web端和uniapp移動端錨點的解決方法

引言

前端在工作中,時不時會碰到錨點的需求,即要求點擊某個元素之后,跳轉到另一處或者滾動條移動到指定位置

web端

控制滾動條
document.body.scrollTop = 750

上述即標識滾動條會移動到距離頂部750px的地方

跳轉到指定元素
document.getElementById("divId").scrollIntoView()

還可以使用a標簽和window.location.hash,但是會造成URL更新導致頁面刷新,不建議使用

uniapp的移動端

操作滾動條
this.$nextTick(function(){
    setTimeout(()=>{
        uni.pageScrollTo({
            scrollTop: 2000000,
            duration : 0
          })
      },50)
  })

但是這種方法一定要放在nextTick中觸發,設置延時函數
\color{red}{uni.pageScrollTo()要放在 setTimeout() 里面才能獲取到值}

跳轉到指定元素
this.$nextTick(() => {
    setTimeout(() => {                          
        uni.createSelectorQuery().select("#tour").boundingClientRect(function(res) {
        //定位到你要的class的位置
            uni.pageScrollTo({
                scrollTop: res.top,
                duration: 0
            });
        }).exec()
      }, 50)
  })

uniapp基于小程序的技術,而小程序官方文檔中是沒有window對象的,而document是window的一個屬性,\color{red}{所以不能使用document.getElementById},
因此使用uniapp的節點選擇器
\color{red}{注意:uni.createSelectorQuery() 和 uni.pageScrollTo()要放在 setTimeout() 里面才能獲取到值。}

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容