zoukankan      html  css  js  c++  java
  • css吸顶效果

    <template>
      <div id="Furong">
        <div class="tab-control">
          <div v-for="(item, index) in titles" class="tab-control-item" :class="{active: isActive == index}"
            @click="onClick(index)">
            <span>{{item}}</span>
          </div>
        </div>
      </div>
    </template>
    
    <script>
      export default {
        name: 'Furong',
        data() {
          return {
            msg: 'hello furong!',
            titles: ['流行', '新款', '精选'],
            isActive: 0
          }
        },
        methods: {
          onClick(index) {
            console.log("onClick");
            this.isActive = index;
          }
        }
      }
    </script>
    
    <style>
      .tab-control {
        display: flex;
        background-color: orange;
      }
    
      .tab-control-item {
        flex: 1;
        height: 40px;
        line-height: 40px;
      }
    
      .active {
        color: orangered;
      }
    
      .tab-control-item>span {
        padding: 5px;
      }
    
      .active>span {
        border-bottom: 3px solid orangered;
      }
    
      /* 吸顶 */
      #Furong {
        position: sticky;
        top: 0;
      }
    </style>
    

    注:
    移动端可以直接使用,有的浏览器不支持

  • 相关阅读:
    java的反射机制浅谈 分类: java
    2.4.3 Cow Tours
    2.4.2 Overfencing
    2.4.1 The Tamworth Two
    Shortest Paths
    2.3.5 Controlling Companies
    2.3.4 Money Systems
    2.3.3 Zero Sum
    2.3.2 Cow Pedigrees
    2.3.1 Longest Prefix
  • 原文地址:https://www.cnblogs.com/zhangxuechao/p/15029495.html
Copyright © 2011-2022 走看看