vux tab 切换封装组件

最新推荐文章于 2024-07-19 21:11:59 发布

小小雪花儿

最新推荐文章于 2024-07-19 21:11:59 发布

阅读量2.2k

点赞数 2

文章标签： tab切换 vue

本文链接：https://blog.csdn.net/qq_43671996/article/details/86477294

版权

<template>
  <Sticky>
    <tab :line-width=2 active-color='#000' v-model="index" custom-bar-width="1.8rem">
      <tab-item class="vux-center" v-for="(item, index) in navList" :key="index" @on-item-click="getItem(index)" :class="{active:index == num}">
        <ripple>{{item}}</ripple>
      </tab-item>
    </tab>
  </Sticky>
</template>
<script>
import {Sticky, Tab, TabItem} from 'vux'
import ripple from '../Details/components/ripple'
export default {
  props: ['navList'],
  components: {
    Sticky,
    Tab,
    TabItem,
    ripple
  },
  data () {
    return {
      // navList: ['热度', '事件利好', '主力偏好', '今日涨幅'],
      index: 0,
      num: 0
    }
  },
  methods: {
    getItem (index) {
      this.num = index
      this.$emit('getIndex', index)
    }
  }
}
</script>
<style lang="stylus" scoped>
  .active
    color #000important
</style>