tab可以点击，滑动轮播就不行了，下面页面滑动不了什么原因啊老师

Question

<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"
        @scroll="onScroll"
        :options="slideOptions">
        <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 type="text/ecmascript-6">
  import Seller from 'components/seller/seller'
  import Goods from 'components/goods/goods'
  import Ratings from 'components/ratings/ratings'

  export default {
    name: 'tab',
    data() {
      return {
        index: 0,
        tabs: [{
          label: '商品'
        }, {
          label: '评价'
        }, {
          label: '商家'
        }],
        slideOptions: {
          listenSlide: true,
          probeType: 3,
          directionLockThreshold: 0
        }
      }
    },
    computed: {
      selectedLabel: {
        get() {
          return this.tabs[this.index].label
        },
        set(newVal) {
          this.index = this.tabs.findIndex((value) => {
            return value.label === newVal
          })
        }
      }
    },
    methods: {
      onChange(current) {
        this.index = current
      },
      onScroll(pos) {
        const tabBarWidth = this.$refs.tabBar.$el.clientWidth
        const slideWidth = this.$refs.slide.slide.scrollerWidth
        const transform = -pos.x / slideWidth * tabBarWidth
        this.$refs.tabBar.setSliderTransform(transform)
      }
    },
    components: {
      Seller,
      Goods,
      Ratings
    }
  }
</script>

<style lang="stylus" type="text/stylus">
  @import " ~common/stylus/variable"

  .tab
    display: flex
    flex-direction: column
    height: 100%
  >>> .cube-tab
        padding: 10px 0
  .slide-wrapper
    flex: 1
    overflow: hidden
</style>

Answer 1

ustbhuangyi 2018-12-14 00:02:58

往后看视频，会告诉你怎么实现上下联动的

• 提问者 慕粉4201155 #1

  tab看完了，和源码一样，下面goods，seller部分还是左右滑动不了

• ustbhuangyi 回复 提问者 慕粉4201155 #2

  和源码一样是不可能不能滑动的，你先看一下你下面的布局是否满足一个可以左右滑动的 slide

• 提问者 慕粉4201155 #3

  我粘贴复制您的代码，tab组件可以点击，cube-slide部分的cube-slide-item不能左右切换

点开查看后面6条评论