js实现滑动tab栏效果

最新推荐文章于 2022-10-09 10:10:27 发布

原创最新推荐文章于 2022-10-09 10:10:27 发布 · 583 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #微信小程序

js 同时被 2 个专栏收录

6 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

这篇博客探讨了如何使用HTML和CSS构建一个可滚动的标签导航条。通过JavaScript实现点击切换活动标签，并展示了相应的CSS样式设计，包括标签的布局、背景色、边框和内边距等。示例代码中，`<span>`元素用于创建标签，`v-for`指令遍历列表，`click`事件触发标签切换，`active`和`noactive`类控制视觉状态。

html部分

<div class="scrolls">
       <span class="tags" :class="tabIndex00 == index ? 'active' : 'noactive'"
           v-for="(e, index) in list" :key="index"
        @click="changeTabIndex00(indexs)">{{ e.name}}</span>
</div>

js部分（data里面）

 list:[
        {name:'弃捐勿复道',label:0},
        {name:'努力加餐饭',label:1}
      ],
tabIndex00: 0

changeTabIndex00(e) {
    this.tabIndex00 = e
    this.getList()
}

css部分

.scrolls {
        display: flex;
        white-space: nowrap;
        overflow-x: scroll;
        width: 100%;

        .tags {
          padding: 8px 32px;
          background: #ffffff;
          border-radius: 32px;
          margin-left: 16px;
          border: 1px solid #ddd;
          color: #666;
        }

        .tags:first-child {
          margin-left: 0;
        }
}