cube-ui滚动组件 scroll-nav 的使用

对于商城项目来说，商品分类的页面，往往需要用到滚动效果。类似于下面这种。

如果，纯手动用原生css的去写的话，会比较麻烦。但是如果利用cube-ui这个UI库，会很快的实现这个效果，而且兼容性还比较好。下面简单的说下，实现的过程。

scroll-nav

在页面引入scroll-nav 这个组件，然后在里层再嵌套一个组件，cube-scroll-nav-panel。
下面是代码。

 <cube-scroll-nav
        :side=true
        :data="goods"
        :options="scrollOptions"
        v-if="goods.length"
      >
    <cube-scroll-nav-panel
          v-for="good in goods"
          :key="good.name"
          :label="good.name"
          :title="good.name"
        >
        这里是具体的商品内容
  </cube-scroll-nav-panel>
 </cube-scroll-nav>

值得一提的是 cube-scroll-nav 组件中 slide 应为 true，这样才能保证主菜单会在左边栏，同时，不会占据其他的内容空间。然后i向 cube-scroll-nav-panel 中传入数据。这里需要注意的是，cube-scroll-nav-panel 中的商品内容会再遍历一次，也就是两次遍历，再点击左侧菜单栏后，右侧的商品内容区会相应的现实在可视区域。这是cube 组件帮我们开发者，做好的效果。省去了很多的时间，可以专心用于业务逻辑的开发。