vue跨页面锚点定位到想展示的元素

89 阅读1分钟
在网上看了很多文章,最适合自己的永远都是自己能理解的

注意:根据一个唯一标识,来查找相应元素,用id最好,id不能以数字开头最后拼接个字母,以前都是用页面高度来实现的现在有个js属性scrollIntoView

image.png

 <div class="task-list"
    v-for="(it,itIndex) in item.processWorkVOList"
    :id="'scoll'+it.id">**********</div>

我在页面定义了一个标识id用来存另外一个页面传过来的值与上面的还没拼接的id相匹配scrollId 我去另外的页面使用了路由传参

image.png 我在此页面定义了组件内的路由 注意:在页面使用beforeRouteEnter想要使用组件实例需要定义一个回调函数在next里面,把路由传过去的值拿到给想要显示的那个标识字段

beforeRouteEnter(to, from, next){
    console.log(to,from);
    next(function(vm){
      if(from.name=='projectAccount'){
        vm.scrollId=from.query.workId
      }else{
        vm.scrollId=''
      }
    })
  },

在monted函数内定义函数,在此之前是dom没有加载完,把要使用的id传给处理函数

image.png

getlocal(id){
      let idsRef=`scoll${id}`
      let toElements = document.getElementById(idsRef);
      toElements.scrollIntoView({behavior: "smooth", block: "end", inline: "nearest"})      
    },

大功告成。 只适合自己用。