二期中的goods组件:
按照视频里敲出来,点击左侧右侧会滑动,但是标题不会撞击;
滑动右侧的左侧没反应,我对照源码发现也没配置什么属性,有的我全写了,但还是啥反应都没;
还有样式中,如果.goods下div我的不设置高度,goods内容就不会出来,设置得话有不太合理; 这点搞了半天,很头疼;
还请老师把这几个问题帮我解决下,要不后面就没法继续了~~

代码:

<template>
  <div class="goods">
    <div class="scroll-nav-wrapper">
      <cube-scroll-nav
        :side="true"
        :data="goods"
        :options="scrollOptions"
        :current="current"
        @change="changeHandler"
        @sticky-change="stickyChangeHandler"
      >
        <cube-scroll-nav-panel
          v-for="item in goods"
          :key="item.name"
          :label="item.name"
          :title="item.name"
        >
          <ul>
            <li v-for="(food,index) in item.foods" :key="index" 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 class="money">
                  <span class="cur" v-show="food.oldPrice">{{food.oldPrice}}</span>
                  <span class="old">{{food.price}}</span>
                </div>
              </div>
            </li>
          </ul>
        </cube-scroll-nav-panel>
      </cube-scroll-nav>
    </div>
  </div>
</template>

<script>
import { getGoods } from "api"; // 数据api
export default {
  name: "goods",
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      goods: [],
      current: "",
      scrollOptions: {
        click: false,
        directionLockThreshold: 0
      }
    };
  },
  methods: {
    _fetch() {
      getGoods().then(goods => {
        this.goods = goods;
        console.log(this.data);
      });
    },
    changeHandler(label) {
      console.log("changed to:", label);
    },
    stickyChangeHandler(current) {
      console.log("sticky-change", current);
    }
  }
};
</script>

<style lang="stylus" scoped>
@import '~common/stylus/mixin';
@import '~common/stylus/variable';

.goods {
  position: relative;
  text-align: left;
  height: 100%;
  height: 500px;   // 这里不设置就出不来

  .scroll-nav-wrapper {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 48px;
  }

  >>> .cube-scroll-nav-bar {
    width: 80px;
    white-space: normal;
    overflow: hidden;
  }

  >>> .cube-scroll-nav-bar-item {
    display: flex;
    align-items: center;
    height: 54px;
    line-height: 14px;
    padding: 0 12px;
    font-size: $fontsize-small;
    background-color: $color-background-ssss;
  }

  >>> .cube-scroll-nav-bar-item_active {
    background: $color-white;
    color: $color-dark-grey;
  }

  >>> .cube-scroll-nav-panel-title {
    padding-left: 14px;
    height: 26px;
    line-height: 26px;
    border-left: 2px solid $color-col-line;
    font-size: $fontsize-small;
    color: $color-grey;
    background: $color-background-ssss;
  }

  .food-item {
    display: flex;
    margin: 18px;
    padding-bottom: 18px;
    position: relative;

    &:last-child {
      border-none();
      margin-bottom: 0;
    }

    .icon {
      flex: 0 0 57px;
      margin-right: 10px;
    }
  }
}
</style>