ScrollNav 组件

1.10.0 新增

滚动导航组件。

示例

• 基本使用 - Default

  <cube-scroll-nav @change="changeHandler">
    <cube-scroll-nav-panel
      v-for="item in data"
      :key="item.name"
      :label="item.name">
      <ul>
        <li v-for="food in item.foods">
          <div>
            <img :src="food.icon">
            <p>{{food.name}}</p>
          </div>
        </li>
      </ul>
    </cube-scroll-nav-panel>
  </cube-scroll-nav>
  

  import goodsData from 'example/data/goods-list.json'
  
  const goods = goodsData.goods
  
  export default {
    data() {
      return {
        data: goods
      }
    },
    methods: {
      changeHandler(label) {
        console.log('changed to:', label)
      }
    }
  }
  

  goods 的结构类似于这样：

  "goods": [
    {
      "name": "热销榜",
      "type": -1,
      "foods": [
        {
          "name": "皮蛋瘦肉粥",
          // ...
          "icon": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/114/h/114",
          "image": "http://fuss10.elemecdn.com/c/cd/c12745ed8a5171e13b427dbc39401jpeg.jpeg?imageView2/1/w/750/h/750"
        },
        // ...
      ]
    },
    // ...
  ]
  

  cube-scroll-nav 需要和 cube-scroll-nav-panel 组件配合使用，cube-scroll-nav-panel 就是每一个需要导航定位到的面板组件。

  cube-scroll-nav-panel 组件需要一个必须的 Prop：label，唯一标示 key 值。

  当导航 active 项发生变化的时候就会触发 change 事件。

• 侧边式 - Side Style

  <cube-scroll-nav
    :side="true"
    :data="data"
    :current="current"
    @change="changeHandler"
    @sticky-change="stickyChangeHandler">
    <ul class="prepend-header" slot="prepend">
      <li>11</li>
      <li>22</li>
      <li>333</li>
    </ul>
    <cube-scroll-nav-panel
      v-for="item in data"
      :key="item.name"
      :label="item.name"
      :title="item.name">
      <ul>
        <li v-for="food in item.foods">
          <div>
            <img :src="food.icon">
            <p>{{food.name}}</p>
          </div>
        </li>
      </ul>
    </cube-scroll-nav-panel>
  </cube-scroll-nav>
  

  import goodsData from 'example/data/goods-list.json'
  
  const goods = goodsData.goods
  
  export default {
    components: {
      CubePage
    },
    data() {
      return {
        data: goods,
        current: goods[3].name
      }
    },
    methods: {
      changeHandler(label) {
        console.log('changed to:', label)
      },
      stickyChangeHandler(current) {
        console.log('sticky-change', current)
      }
    }
  }
  

  side 设置为 true 代表是一个侧边样式效果；

  data 则是默认传入的数据，这个数据会被传入内部使用的 cube-scroll 组件，当 data 发生变化时，scroll 组件会自动刷新；

  current 是导航默认值，如果有值则会默认滚动到相对应的面板 Panel 的位置。

  sticky-change 就是当前导航条的吸附状态发生改变的时候触发，参数可能的值目前只有两个，一个是 '' 一个是 'cube-scroll-nav-bar'。

  此外，这里还在 cube-scroll-nav-panel 之前插入了一些内容，利用 prepend 插槽实现。

Props

CubeScrollNav

CubeScrollNavPanel

插槽

事件

实例方法