上下联动时，在slide组件中@change事件，不起作用

Question

上下联动时，在slide组件中@change事件，不起作用，slide组件中定义的@change="onChange"事件，只在cube-tab-bar切换页签时触发

Answer 1

慕虎2459995 2020-01-07 23:41:07

你好！请问是哪里有问题？我也遇到这坑，怎么改，在线求！感谢！

• 长脖儿都爱笑 #1

  这个问题是CSS写错了

• 慕仰7490998 回复 长脖儿都爱笑 #2

  是哪里的css错了呢，我也刚刚遇到这个问题

• 慕仰7490998 回复 长脖儿都爱笑 #3

  还真是css写错了，我是tab组件的css,细节决定成败

Answer 2

ustbhuangyi 2019-04-13 10:55:28

你说的上下联动是什么意思？

• 提问者 qq_椭圆的南瓜_03336888 #1

  就是点击上面的商品时，下面切换到商品，点评价时，切换到评价，现在的问题是，点击时是正常的，但在下面左右滑动时，滑动不了

• ustbhuangyi 回复 提问者 qq_椭圆的南瓜_03336888 #2

  滑动不了需要检查一下你的布局是否满足能滚动的条件，建议和源码的布局和 CSS 对比一下

• 提问者 qq_椭圆的南瓜_03336888 回复 ustbhuangyi #3

  我再好好查查吧，多谢你的热心帮忙

Answer 3

提问者 qq_椭圆的南瓜_03336888 2019-04-13 08:22:22

问题中的代码怎么不显示？代码如下

<template>
 <div class="tab">
   <cube-tab-bar
     :showSlider=true
     v-model="selectedLabel"
     :data='tabs'
     ref="tabBar"
     class="border-bottom-1px"
   >
   </cube-tab-bar>
   <div class="slide-wrapper">
     <cube-slide
       :loop=false
       :auto-play=false
       :show-dots=false
       :initial-index="index"
       ref="slide"
       @change="onChange"
     >
       <cube-slide-item>
         <Goods></Goods>
       </cube-slide-item>
       <cube-slide-item>
         <Ratings></Ratings>
       </cube-slide-item>
       <cube-slide-item>
         <Seller></Seller>
       </cube-slide-item>
     </cube-slide>
   </div>
 </div>
</template>

<script>
 import Goods from 'components/goods/goods'
 import Ratings from 'components/ratings/ratings'
 import Seller from 'components/seller/seller'

 export default {
   name: 'tab',
   data() {
     return {
       index: 0,
       tabs: [
         {label: '商品'},
         {label: '评价'},
         {label: '商家'}
       ]
     }
   },
   computed: {
     selectedLabel: {
       get() {
         return this.tabs[this.index].label
       },
       set(newVal) {
         this.index = this.tabs.findIndex((value) => {
           return value.label === newVal
         })
       }
     }
   },
   methods: {
     onChange (v) {
       console.log('------------------' + v)
       this.index = v
     }
   },
   components: {
     Goods,
     Ratings,
     Seller
   }
 }
</script>

• 慕仰7490998 #1

  我也是卡在你这里了，难受唉