DetailNavBar组件实现tag和滚动的双向联动

在Detail组件中使用DetailNavBar组件时，其center插槽中放置了四个tag：[‘商品‘, ‘参数‘, ‘评论‘, ‘推荐‘]。事实上，这四个tag分别对应详情页面的四个部分。现在我们希望点击某个tag，页面会自动滚动到对应的区域；反之，当页面滚动到某个区域时，对应的tag被高亮（字色变红）。

我们先来看如何实现前半部分，即点击tag—自动滚动。由于滚动的操作要在Scroll组件中完成，而Scroll也是Detail的子组件，所以我们把主要逻辑放在公共的父组件Detail中完成。这样，点击事件发生后，要先将这一事件发送给父组件，一同发送的还有被点击tag的索引。

this.$emit(‘titleClick‘, index)

父组件Detail监听到事件后，执行titleClick方法：

<detail-nav-bar class="detail-nav" @titleClick="titleClick" ref="nav"></detail-nav-bar>

titleClick(index) {
      this.$refs.scroll.scrollTo(0, -this.themeTopYs[index], 200);
}

给子组件的标签添加属性ref="xxx"后，父组件就可以通过this.$refs.xxx来访问子组件了。这条语句的意思是，点击后，滚动到-this.themeTopYs[index]的位置，滚动时间为200ms。

那么可想而知，themeTopYs数组中存放的便是那四个tag所对应的页面位置，那么这个数组怎么得到的呢？

DetailNavBar组件实现tag和滚动的双向联动

原文：https://www.cnblogs.com/creationMarvel/p/14901504.html