tsx封装锚点功能

最新推荐文章于 2024-06-28 09:29:30 发布

jeremygeng

最新推荐文章于 2024-06-28 09:29:30 发布

阅读量524

点赞数 1

分类专栏：锚点功能文章标签： ts nuxt 锚点

本文链接：https://blog.csdn.net/jeremygeng/article/details/102697974

版权

本文介绍如何在Nuxt.js项目中利用TypeScript（TS）封装锚点功能，包括实现效果展示及关键代码解析。

摘要由CSDN通过智能技术生成

基于nuxt+ts封装的锚点功能

效果

第一页
点击333之后的效果

代码

子组件


<script lang='tsx'>
import { Component, Vue, Prop, Emit, Watch, Mutation } from 'nuxt-property-decorator'
interface anchorItem {
  icon: string,
  text: string,
  class: string,
  href: string
}
interface anchorContentItem {
  title: string,
  secondTitle: string
}
@Component
export default class SolutionItemComponent extends Vue {
  @Prop({
    type: Array,
    default () {
      return []
    }
  }) public anchorArr!: Array<anchorItem>;
  @Prop({
    type: Array,
    default () {
      return []
    }
  }) public anchorContent !: Array<anchorContentItem>
  // 是否在顶部
  public isPosTop: boolean = false
  
  // 锚点点击事件
  public clickAnchor (item) {
     this.anchorArr.forEach(item => {
      item.class = ''
    })
    item.class = 'active'
    let anchorTop: any = this.$refs.anchorTop
    let anchorTopHeight = anchorTop.clientHeight
    let menu: any = document.getElementsByClassName('head-box')[0]
    let menuHeight = menu.clientHeight
    let element: any = document.getElementById(item.href)
    let elementTop = element.offsetTop
    let oldScrollTop = document.getElementsByClassName('container-box')[0].scrollTop
    if (oldScrollTop < elementTop - anchorTopHeight - menuHeight) {
      let timer = setInterval(function () {
        let scrollTop = document.getElementsByClassName('container-box')[0].scrollTop
        if (scrollTop >= elementTop - anchorTopHeight - menuHeight) {
          clearInterval(timer)
        }