【cube-ui】使用ScrollNav组件实现菜单部分

介绍

先看看cube-ui组件库中ScrollNav组件的详细介绍：https://didi.github.io/cube-ui/#/zh-CN/docs/scroll-nav
这个组件实现了左右联动、顶部吸附…有其他需求可稍作修改

开始

options是better-scroll配置项，具体介绍：https://better-scroll.github.io/docs-v1/doc/zh-hans/options.html#freescroll

html代码部分

<template>
  <div class="goods">
    <div class="scroll-nav-wrapper">
      <cube-scroll-nav
        :slide=true
        :data="goods"
        :options="scrollOptions"
        v-if="goods.length"
      >
      <!--        slide设置为true代表是一个侧边样式的效果-->
<!--        data是默认传入的数据，这个数据会被传入内部使用的cube-scroll组件，当data发生变化时，scroll组件会自动刷新-->
        <cube-scroll-nav-panel
          v-for="good in goods"
          :key="good.name"
          :label="good.name"
          :title="good.name"
        >
          <ul>
            <li
              v-for="food in good.foods"
              :key="food.name"
              class="food-item"
            >
              <div class="icon">
                <img width="57" height="57" :src="food.icon">
              </div>
              <div class="content">
                <h2 class="name">{{food.name}}</h2>
                <p class="desc">{{food.description}}</p>
                <div class="extra">
                  <span class="count">月售{{food.sellCount}}份</span>
                  <span>好评率{{food.rating}}%</span>
                </div>
                <div>
                  <span class="now">￥{{food.price}}</span>
                  <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
  </div>
</template>

script代码：

export default {
    name: 'goods',
    props: {
      data: {
        type: Object,
        default() {
          return []
        }
      }
    },
    data() {
      return {
        goods: [],
        scrollOptions: {
          click: false,
          // 涉及到点击问题，这里使用了scroll嵌套，为了不影响左右滑动的前提下，又不能让它点进外层scroll
          directionLockThreshold: 0
        }
      }
    }
  }

因为这里只传入了空的goods数组，所以不会有任何渲染效果，接下来就通过Api动态获取goods数据

1、首先在api/index.js文件中

const getGoods = get('/api/goods')
export {
  getGoods
}

2、考虑以哪种方式去接受这个getGoods数据，一般我们会用created或mounted生命周期去获取数据，但这在用生命周期获取数据并不合适，不论是拿个生命周期都会一股脑地把数据全都请求过来，为了不浪费资源，我们应该是切换到某个组件下时再去做数据请求。比如在商品页时不去请求评价页的数据。

在goods组件下：
导入数据：

import { getGoods } from 'api'

创建一个fetch钩子拿到数据

methods: {
      fetch() {
        getGoods().then((goods) => {
          this.goods = goods
        })
      }
    }

在切换tab时做数据请求，也就是tab组件下的change()方法内去调用fetch方法。

先拿到每个组件的实例

<cube-slide-item v-for="(tab,index) in tabs" v-bind:key="index">
          <component :is="tab.component" :data="tab.data" ref="component"></component>
</cube-slide-item>

onChange(current) {
        // 把current赋值给index,然后在selectedLabel重新计算index，传给initial-index找到对应的label实现联动
        this.index = current
        // 通过current获取到当前组件
        const component = this.$refs.component[current]
        // 做判断：当当前组件定义了fetch方法，我们才去调用fetch方法，因为并不是所有组件都需要去获取数据
        component.fetch && component.fetch()
      }

onChange()方法是在滑动进入的时候才调用的，直接点击组件并不起作用，所以我们还需要手动调用一次,传入当前索引值

mounted () {
      this.onChange(this.index)
    }

这样就成功获取到数据了

接下来把css安排上就行了。