Vue+iview锚点组件使用没有效果，怎么回事？

Question

vue+iview引入锚点组件，官网的介绍太少，不知道怎么回事，一直没办法跳转，这是我的页面代码

<template>
    <div>
        <Tabs size="small">
            <TabPane label="球队榜"> 
                <div class="teamleft">
                    <Anchor container=".nba">
                        <AnchorLink href="#east" title="东部排名" />
                        <AnchorLink href="#west" title="西部排名" />
                    </Anchor>
                </div>
                <div class="nba">
                        <div id="east" style="height:30rem;">
                            东部排名
                        </div>
                        <div id="west" style="height:30rem;">
                            西部排名
                        </div>
                </div>
            </TabPane>
            <TabPane label="球员榜">球员榜</TabPane>
            <TabPane label="新秀榜">新秀榜</TabPane>
            <TabPane label="日榜">日榜</TabPane>
            <TabPane label="伤病">伤病</TabPane>
            <TabPane label="荣誉榜">荣誉榜</TabPane>
        </Tabs>
    </div>
</template>

<script>
    export default{
        data(){
            return{

            }
        }
    }
</script>

<style scoped>
.teamleft{display: block;width: 20%;border-right: 1px solid #e8e8e8;float: left;}
.nba{display: block;width: 80%;float: left;position: relative;overflow-y: scroll;}
</style>

如果不加container=".nba"可以跳转，但是是整个页面跳，我想实现左边固定，右边随锚点跳转。
第一次提问，万分感谢！

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

在你的Vue + iView项目中，如果你想要使用Anchor组件来实现按锚点导航功能，你需要确保在项目中正确地引入了iView和Anchor组件。以下是一个基本的例子：

<!-- 安装iView插件 -->
<script src="https://cdn.jsdelivr.net/npm/vue@3.2.45/dist/vue.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/iview@1.3.0/build/iview.css">

<!-- 引入Anchor组件 -->
<script setup lang="ts">
import { ref } from 'vue'
import { Anchor, AnchorLink } from 'iview';

const anchors = ref([
    {
        href: '#east',
        title: '东部排名',
    },
    {
        href: '#west',
        title: '西部排名',
    },
]);

// 为每个锚点设置点击事件处理函数
anchors.forEach((anchor) => {
    anchor.link = new Anchor({
        container: '.nba',
        onClick() {
            // 在这里添加你希望执行的操作，例如导航到另一个组件或显示弹窗等
        },
    });
});

// 指定当前激活的锚点
let activeAnchorIndex = 0;

// 更新激活的锚点索引时触发
anchors.value[activeAnchorIndex].link.$on('click', () => {
    activeAnchorIndex++;
    if (activeAnchorIndex >= anchors.length) {
        activeAnchorIndex = 0;
    }
});
</script>

在这个例子中，我们首先导入了iView的库，并指定了要使用的版本。然后，我们在setup生命周期钩子中创建了一个数组，其中包含了所有的锚点链接。每个链接都包含了一个href属性（用于指定锚点所在的页面）和一个title属性（用于在用户点击时显示）。同时，我们也定义了一个数组，用于存储这些锚点链接。

接着，在<template>部分，我们为每个锚点分配了一个<Anchor>元素，并为其提供了onClick事件处理器。这个事件处理器将在用户点击某个锚点时被调用，你可以在此处添加你想要执行的操作，比如导航到另一个组件或者展示弹窗等。

最后，我们还设置了激活锚点的索引，并监听了这个索引的变化。当索引改变时，我们将激活的锚点重新设置为新的值。

这样，当你点击不同的锚点时，页面就会根据其对应的锚点进行相应的操作，从而实现了按锚点导航的功能。