再问一次 cube scroll

Question

老师 ！代码仓库 报错是因为我吧 node的组件删除了。

这个是 使用cube-scroll-nav组件的页面 您帮我看一下吧

`

• {{food.good}}

`

在本地测试的时候，左右的tab滑动没有问题， 但是 左右上下滑动 和 定位 ，样式没有效果。

ps:
另外 fetch方法 ，如果 不 creatde 的话 不能使用，我看您的源代码 是没有 created方法的。

引入 maxs data的时候 如果 this.maxs = max 不加.data 获取不到json内容

Answer 1

提问者 酷品宝 2019-03-19 13:48:57

<template>
 <div class="goods">
   <div class="scroll-nav-wrapper" >
     <cube-scroll-nav
       :side=true
       :data="maxs"
       @change="changeHandler"
       @sticky-change="stickyChangeHandler"
       :opions="scrollOptions"
       v-if="maxs.length"
     >
     <cube-scroll-nav-panel
       v-for="item in maxs"
       :key="item.name"
       :label="item.name"
       :title="item.name">
       <ul>
         <li
         v-for="food in item.goods">
           <div>
             <h1>{{food.good}}</h1>
             <img class="good_img" :src="food.goods_front_img" alt="">
           </div>
         </li>
       </ul>
     </cube-scroll-nav-panel>
     </cube-scroll-nav>
   </div>
 </div>
</template>

<script>
 import { getMax } from '../../../api/api'

 export default {
   name:'maxs',
   props:{
     data:{
       id:Object,
       default(){
         return{}
       }
     }
   },
   data(){
     return{
       maxs:[],
       scrollOptions:{
         click:false,
         directionLockThreshold:0
       }
     }
   },
   methods:{
     fetch(){
       getMax().then((maxs) =>{
         this.maxs = maxs.data
       })
     },
     changeHandler(label) {
       console.log('changed to:', label)
     },
     stickyChangeHandler(current) {
       console.log('sticky-change', current)
     }
   },
   created(){
       this.fetch();
   }
 }

</script>

• 提问者 酷品宝 #1

  这个是这个页面的代码！