引言
前端在工作中,時不時會碰到錨點的需求,即要求點擊某個元素之后,跳轉到另一處或者滾動條移動到指定位置
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中觸發,設置延時函數
跳轉到指定元素
this.$nextTick(() => {
setTimeout(() => {
uni.createSelectorQuery().select("#tour").boundingClientRect(function(res) {
//定位到你要的class的位置
uni.pageScrollTo({
scrollTop: res.top,
duration: 0
});
}).exec()
}, 50)
})
uniapp基于小程序的技術,而小程序官方文檔中是沒有window對象的,而document是window的一個屬性,,
因此使用uniapp的節點選擇器