VUE 顶部滑动Scroll 组件

最新推荐文章于 2024-09-13 22:49:49 发布

PycSX

最新推荐文章于 2024-09-13 22:49:49 发布

阅读量173

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/weixin_48188065/article/details/119821618

版权

Vue.js 前端开发组件交互布局响应式

关键词由CSDN通过智能技术生成

VUE 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<template>
  <div class="max" style="width:100%;">
    <div class="outer" style="width:100%;overflow-x:auto;background-color:#FFFFFF;">
      <div style="display:flex;">
        <div v-for="(value,key) in list" :key="key">
          <div
            @click="active = key"
            :class="active == key?'change':''"
            style="height:2.1875rem;width:3.125rem;line-height:2.1875rem;font-size:.875rem;color:#999999;margin:0 1.25rem;text-align:center;">
          {{value}}
          </div>
          <div v-if="active === key" style="height:.125rem;background-color: green;margin:0 1.25rem;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type:[],
      default: []
    }
  },
  data() {
    return {
      active: 0
    }
  },
  methods: {

  }
}
</script>

<style>
.max{
  position:sticky;
  top: 0px;
}
.outer::-webkit-scrollbar{
  display: none !important;
}
.change{
  color: green !important;
}
</style>