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() 里面才能获取到值。}

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容