ScrollNavBar 组件

1.10.0 新增

滚动导航条组件，效果类似于滴滴打车业务线切换。

示例

• 横向，默认

  <cube-scroll-nav-bar :current="current" :labels="labels" @change="changeHandler" />
  

  export default {
    data() {
      return {
        current: '快车',
        labels: [
          '快车',
          '小巴',
          '专车',
          '顺风车',
          '代驾',
          '公交',
          '自驾租车',
          '豪华车',
          '二手车',
          '出租车'
        ]
      }
    },
    methods: {
      changeHandler(cur) {
        this.current = cur
      }
    }
  }
  

  可以通过 current 指定 active 的 key 值，labels 则是所有的 key 值的集合；当 active 的值发生变化后，会触发 change 事件。

• 竖向

  <div class="side-container">
    <cube-scroll-nav-bar
      direction="vertical"
      :current="current"
      :labels="labels"
      :txts="txts"
      @change="changeHandler">
      <i slot-scope="props">{{props.txt}}</i>
    </cube-scroll-nav-bar>
  </div>
  

  export default {
    data() {
      return {
        current: '快车',
        labels: [
          '快车',
          '小巴',
          '专车',
          '顺风车',
          '代驾',
          '公交',
          '自驾租车',
          '豪华车',
          '二手车',
          '出租车'
        ],
        txts: [
          '1快车',
          '2小巴',
          '3专车',
          '4顺风车',
          '5代驾',
          '6公交',
          '7自驾租车',
          '8豪华车',
          '9二手车',
          '10出租车'
        ]
      }
    },
    methods: {
      changeHandler(cur) {
        this.current = cur
      }
    }
  }
  

  .side-container
    height: 300px
    margin-top: 20px
  

  这是一个竖向的示例，direction 设置为 vertical 代表是一个竖向导航条样式；这里还使用了 txts Prop 用于指定展示文案，顺序是和 labels 一一对应的，如果没传入 txts，则默认 txts 就等于 labels。

  该示例中还展示了默认作用域插槽的使用，props.txt 就是当前项的 txt 的值。

Props

插槽

事件

实例方法