账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    antdv 的锚点a-anchor 如何设置可以根据屏幕滚动,锚点高亮?
    72
    0
    现在是可以点锚点可以跳转,但是锚点不会根据页面的滚动而高亮,请教大佬们,如何可以做到滚动高亮,是getContainer这个属性吗?需要如何设置呢?anchor为整个content的class <a-anchor :affix="false" @change="onChange" class="anchor" v-show="isAnchor" :getContainer="trigger => trigger" :target-offset="targetOffset" :target="()=>document.querySelector('.anchor')" @click="handleAnchorClick" :get-current-anchor="getCurrentAnchor"> <a-anchor-link v-for="(item,index) in drawerArr" :href="`#${item.val}`" :title="item.name" :key="index"></a-anchor-link> </a-anchor> data() { return { targetOffset: undefined, drawerArr: [ { name: 'Deal', val: '#Deal' }, { name: 'Info', val: '#Info' }, { name: 'Plan', val: '#Plan' }, { name: 'Financing', val: '#Follow' } ] }; }, mounted() { this.$nextTick(() => { window.addEventListener('scroll', this.onScroll, true); }); }, methods:{ onScroll() { let scrolled = document.querySelector('.portfolio-review-anchor').scrollTop; let jump = document.querySelectorAll('.d_jump'); for (let i = 0; i < jump.length; i++) { if (jump[i].offsetTop >= scrolled) { this.getCurrentAnchor(i); break; } } }, getCurrentAnchor(index) { let id = ''; this.drawerArr.forEach((i, indx) => { if (indx === index) { id = i.val; } }); return id; }, handleAnchorClick(e, link) { // 阻止点击的默认事件修改路由 // e.preventDefault(); let srcolls = document.getElementById(link.href); srcolls.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' }); },}
    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 雷袭月启 普通会员 1楼

      在Ant Design Vue中,你可以使用scrollTo事件来实现锚点的滚动高亮。以下是一个简单的示例:

      ```javascript

      ```

      在这个示例中,a-anchor元素设置了:href属性为锚点的URL,@click属性用于处理点击事件,@scroll属性用于处理滚动事件。scroll方法会触发滚动事件,你可以在这里添加你想要处理的逻辑。

      在滚动事件处理函数中,你可以使用scrollTo方法来滚动到锚点的位置。例如:

      javascript scroll() { this.scrollTo(this.path); }

      这样,当你滚动到锚点的位置时,handleClick方法就会被调用,你可以在这个方法中处理你的点击事件。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部