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

-->
複製代碼