点击tab项，吸顶效果 借用a标签锚点方法

点击tab项，吸顶效果 借用a标签锚点方法，在小程序里无效果

<template>
  <div class="hello">
    <!-- 二级tab -->
    <div class="twoTab">
      <a :href="'#' + item.mao" v-for="(item, o) in list" :key="o"
        >{{ item.group_name }}
      </a>
    </div>
    <hr />

    <!-- 内容 -->
    <div class="ganmeContent">
      <div v-for="(item, i) in list" :key="i">
        <a :name="item.mao"> {{ item.group_name }}----{{ item.mao }} </a>
        <a class="ganmeItem"></a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    init() {
      //请求到数据res后 ， 把数据做处理
      let res = [
        {
          group_name: "全场",
        },
        {
          group_name: "第1局",
        },
        {
          group_name: "第2局",
        },
        {
          group_name: "第3局",
        },
        {
          group_name: "第4局",
        },
      ];

      if (res.length == 0) return; // 如果没数据 不继续
      let arr = [];
      res.map((item, v) => {
        item.mao = "mao" + v; // 给个随机数 为了做锚点
        arr.push(item);
      });

      this.list = arr; // 有了锚点的数据渲染
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="less">
.hello {
  padding-bottom: 500px; // 随便设置
}
.twoTab {
  display: flex;
  justify-content: space-between;
}

.ganmeItem {
  display: inline-block;
  width: 100%;
  height: 400px;
  background-color: #ccc;
  border-radius: 50px;
}
</style>