老师，tab不显示内容，帮忙排查一下可以吗

Question

<template>
  <div class="tab">
    <cube-tab-bar
      :useTransition=false
      :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"
      >
        <cube-slide-item>
            11111111
        </cube-slide-item>
        <cube-slide-item>
            22222222
        </cube-slide-item>
        <cube-slide-item>
            22222222222
        </cube-slide-item>
      </cube-slide>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'tab',
    props: {
      initialIndex: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        index: this.initialIndex,
        tabs: [{
          label: '全部'
          }, {
            label: '成功'
          }, {
            label: '查询中'
          }
        ],
        slideOptions: {
            listenScroll: 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: {
      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)
      },
      onChange(current) {
        this.index = current
        console.log(this.index)
        const instance = this.$refs.component[current]
        if (instance && instance.fetch) {
          instance.fetch()
        }
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @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 2020-03-11 10:15:15

这里改成 v-if 就可以了

• 提问者 慕粉1230329569 #1

  好的  谢谢老师

• 提问者 慕粉1230329569 #2

  非常感谢！

Answer 2

ustbhuangyi 2020-03-10 18:10:43

你上传的代码以及分支对吗，我怎么打开是这样的?

• 提问者 慕粉1230329569 #1

  对的 点击查询记录

Answer 3

ustbhuangyi 2020-03-10 15:26:41

你把代码传到 GitHub 上，我抽空帮你看下

• 提问者 慕粉1230329569 #1

  老师，我上传到这个地址了https://github.com/tank-w/cube-uics.git

Answer 4

ustbhuangyi 2020-03-10 14:29:06

看一下对应的 DOM 有没有渲染出来。

• 提问者 慕粉1230329569 #1

  DOM没有渲染出来，老师，我贴了下代码，麻烦您看看哪有问题