vue基于原生js实现楼层效果

vue基于原生js实现楼层效果

1.结构

代码如下（示例）：

 <add-law ref="addLaw">	
 	<div ref="lawList"></div>
 </add-law>
<ul>
   <li
	  @click="navClick(index)"
	  v-for="(item, index) in list">
	   {{ item.name }}
   </li>
</ul>
export default {
	data(){
	  list:[
		  {
		  	id:1,
		  	name:'嚯'
		  },
		  {
			id:2,
			name:'哈'
		  }
	  ]
	},
	mounted() {
		//在mounted里监听滚动事件
     window.addEventListener('scroll', this.navScroll, true)
  },
  methods:{
  	//监听触发函数
	 navScroll() {
       let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
       const floor = this.$refs.addLaw.$refs.lawList //这里是在addlaw组件里面  我用的ref获取的dom
       floor.forEach((item, index) => {
       if (scrollTop >= item.offsetTop - 200) {
          console.log('111')
        }
      })
    },
    //导航点击事件触发函数
    navClick(index) {
      const floor = this.$refs.addLaw.$refs.lawList
      floor[index].scrollIntoView(true)//滚动到指定dom位置
    }
  }
}

结尾

原作者🔗：https://www.jianshu.com/p/7a7ef7fec727?from=groupmessage
自己写一遍 记得更清楚一点 哈哈哈哈哈哈