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

r囧r小猫 2022-12-23 07:27 148阅读 0赞

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

<template>
      <div class="hello">
        
        <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>