vue 学习笔记 cube-ui 实现tab切换

API文档：didi.github.io/cube-ui/#/z…
example地址：github.com/didi/cube-u… 实现步骤： 1.tab切换实现

<cube-tab-bar
      v-model="selectedLabel"   
      :data="tabs"
      class="border-bottom-1px"
      :showSlider="true"
      ref="tabBar"
      :useTransition="false"
    ></cube-tab-bar>
    
    <!--v-model 动态绑定tab切换内容值，当底部有change事件时，自动切换内容
        show-slider 是否显示底部滑动的线
        useTransition 当使用内容为slier滑动的时候，避免重复进行滑动事件绑定，当前全部的须要展现的全部导航列表
    -->
复制代码

2.slider实现

<cube-slide
      ref="slide"
      :loop=false
      :initial-index="index"
      :auto-play="false"
      :show-dots="false"
      :options="slideOptions"
      @change="onChange"
      @scroll="onScroll"
    >
    <!--
      loop slider 组件是都循环播放
      initial-index 当前显示的索引值
      auto-play 是否自动轮播
      show-dots 是否显示轮播组件下的小圆点
      :options="slideOptions" 是否监听滚动事件及其余的相关配置
      change  监听是否当前索引值的改变
      scroll  监听当前移动位置信息
    -->
      <cube-slide-item v-for="(item,index) in tabs" :key="index">
        <cube-scroll>
          <component :is="item.component"></component>
        </cube-scroll>
      </cube-slide-item>
    </cube-slide>
复制代码

相关数据信息：

<script>
export default {
  props: {
    tabs: Array,  //从父组件传递过来的数据值
    default() {
      return {};
    }
  },
  data() {
    return {
      index: 0,
      slideOptions: {
        //监听滚动事件
        listenScroll: true,
        probeType: 3, // 0 不派发scroll事件，1：非实时；2：滑动过程当中；3：不只在屏幕滑动的过程当中，并且momentum 滚动动画运行过程当中实时派发
        directionLockThreshold: 0 //设置竖向滚动
      }
    };
  },
  methods: {
    onChange(current) {
      this.index = current;
    },
    onScroll(pos) {
      //滚动时候的坐标
      // cube-slide的scroll事件，滚动中实时派发，获取到滚动位置的坐标值
      // 滚动slide的时候，tab实时改变
      // 原理是：先获取tabBar和slide的宽度，而后获取到滚动位置的坐标值，坐标值/slideWidth获得滚动的比例，而后乘以tabBarWidth,实时获得
      // tab下划线的滚动位置
      // 调用cube-tab的setSliderTransform方法，参数就是上面获得的值
      const tabBarWidth = this.$refs.tabBar.$el.clientWidth; //上面tabe的宽度
      const slideWidth = this.$refs.slide.slide.scrollerWidth; //整个slide宽度
      const transform = (-pos.x / slideWidth) * tabBarWidth; //移动的位置
      this.$refs.tabBar.setSliderTransform(transform);
    }
  },
  computed: {
    selectedLabel: {
      get() {
        return this.tabs[this.index].label;
      },
      set(newVal) {
        this.index = this.tabs.findIndex(value => {
          return value.label === newVal;
        });
      }
    }
  }
};
</script>

<!--
父组件传递的数据值：
tabs(){
      return  [
        {
          label: "商品",
          component: Goods,
          data: {
            seller: this.goods  //对应的组件内容
          }
        },
        {
          label: "评价",
          component: Ratings,
          data: {
            ratings: this.ratings
          }
        },
        {
          label: "商家",
          component: Seller,
          data: {
            goods: this.selller
          }
        }
      ]
  }

-->
复制代码