再问一次 cube scroll

来源：4-3 tab 组件抽象和封装

酷品宝

2019-03-19

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

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

`

{{food.good}}

`
图片描述

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

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

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

写回答

1回答

酷品宝

提问者

2019-03-19

<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>