js实现滑动tab栏效果

天使凯莎的小迷弟

于 2022-03-15 10:09:04 发布

阅读量476

点赞数

分类专栏：微信小程序 js 文章标签： vue.js 前端微信小程序

本文链接：https://blog.csdn.net/Polaris_best/article/details/123495250

版权

js 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

微信小程序

1 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

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;
        }
}