使用cubeui封装的一个简单的导航滚动栏

使用到了 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 里面传，然后