使用cube-ui封装的一个简单的导航滚动栏

2019-10-12

使用到了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>

调用组件 image.png定义的数据,组件中需要啥数据就往data里面传,然后 image.png

原文链接:segmentfault.com

上一篇:Vue 2.x diff原理详解
下一篇:javascript 设计模式 --单例模式
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部