使用cube-ui封裝的一個簡單的導航滾動欄

使用到了cube-UI , 組件全部代碼
使用過程中用到了 動態模板的功能，還有用到了findIndex() ，所以IE方面應該不支持，因爲IE不支持findIndex()

<template>

<div class="tab5">
  <cube-tab-bar
    v-model="selectedLabel"
    :showSlider=true
    :useTransition=false
    :data="tabs"
    ref="tabbar"
    @change="changeHandler">
  </cube-tab-bar>
  <div class="slide-wrapper">
    <cube-slide
      :loop=true
      :auto-play=false
      :show-dots=false
      :initial-index="index"
      :options="aaa"
      ref="slide"
      @change="onChange"
      @scroll="onScroll"
    >
      <cube-slide-item v-for="(tab,index) of tabs" :key="index">
        <component :is="tab.component" :data="tab.data"> </component>
      </cube-slide-item>
    </cube-slide>
  </div>
</div>

</template>

<script>

export default {
name: 'tab',
data () {

return {
  aaa: {
    probeType: 3,
    listenScroll: true,
    directionLockThreshold: 0
  },
  index: this.defaultIndex
}

},
props: {

tabs: {
  type: Array,
  default () {
    return {}
  }
},
// 默認的顯示第幾個，
defaultIndex: {
  type: Number,
  default: 0
}

},
mounted () {
},
computed: {

// 當前選擇的數據
selectedLabel: {
  get () {
    return this.tabs[this.index].label
  },
  set (newValue) {
    this.index = this.tabs.findIndex((value) => {
      return value.label === newValue
    })
  }
}

},
methods: {

changeHandler () {
},
onChange (current) {
  console.log(current, '11111111')
  this.index = current
},
onScroll (pox) {
  console.log(pox.x)
  const tabwidth = this.$refs.tabbar.$el.clientWidth
  const silderWidth = this.$refs.slide.slide.scrollerWidth
  const transform = -pox.x / silderWidth * tabwidth
  this.$refs.tabbar.setSliderTransform(transform)
}

}
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
.slide-wrapper{

overflow hidden
flex 1

}
</style>

調用組件

定義的數據，組件中需要啥數據就往data裏面傳，然後