小程序开发|小程序制作|小程序开发网

搜索

web端和uniapp移动端锚点的解决方法

2022-6-12 09:09| 发布者: 北极圈的瓜| 查看: 206| 评论: 0

摘要: 引言前端在工作中,时不时会碰到锚点的需求,即要求点击某个元素之后,跳转到另一处或者滚动条移动到指定位置web端控制滚动条document.body.scrollTop = 750上述即标识滚动条会移动到距离顶部750px的地方跳转到指定

引言

前端在工作中,时不时会碰到锚点的需求,即要求点击某个元素之后,跳转到另一处或者滚动条移动到指定位置

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的节点选择器

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部