Vue中使用描点 + 滚动触发描点

锚点

// 菜单描点
<ul class="aside-menu">
  <template v-for="(item, index) in asideMenu">
    <li v-if="item.child" :key="index" class="menu-item" :class="active.name == item.name ? 'active' : ''">
      <h4>{{item.name}}</h4>
      <ul class="menu-item-child">
        <template v-for="(sub, index) in item.child">
          <li :key="index" :class="active.childName == sub.name ? 'active-child' : ''" @click="goAnchor({name: item.name, childName:sub.name})">{{sub.name}}</li>
        </template>
      </ul>
    </li>
    <li v-else class="menu-item" :key="index" :class="active.name == item.name ? 'active' : ''" @click="goAnchor({name: item.name})">{{item.name}}</li>
  </template>
</ul>

// 描点事件
goAnchor(activeObject) {
  // 当前选中的项
  this.active = activeObject;
  $('.setting-bar .setting-center').animate({scrollTop: this.$el.querySelector('#' + activeObject.name).offsetTop}, 300);
}

滚动触发描点

// 需要滚动触发描点的区域
<div class="setting-center scrollbar">
  <CheckedGroup :checkedList.sync="checkedList" :selectItem.sync="selectItem" ref="checkedGroup"></CheckedGroup>
</div>

// scroll事件处理
// 这里需要注意dom是否加载和this的指向
let _this = this;
$('.setting-bar .setting-center').scroll(function () {
  let numTop = $(this).scrollTop();
  _this.asideMenu.forEach(item => {
    if (item.child) {
      item.child.forEach(sub => {
        if (_this.$el.querySelector('#' + item.name).offsetTop <= numTop) {
          _this.active = { name: item.name, childName: sub.name };
        }
      });
    } else {
      if (_this.$el.querySelector('#' + item.name).offsetTop <= numTop) {
        _this.active = { name: item.name };
      }
    }
  });
});