cube-ui实现tab跟页面联动

cube-ui实现tab跟页面联动

看了vue3.0重构饿了么，里面讲到cube-ui的使用。记下来tab跟页面如何联动

template

template

<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"
                    :options="slideOptions"
                    @scroll="onScroll"
                    @change="onChange">
          <cube-slide-item>
            <ul>
              <li>asdasdasd</li>
              <li>asdasdasd</li>
              <li>asdasdasd</li>
              <li>123123124124123123</li>
              <li>123123124124123123</li>
              <li>123123124124123123</li>
              <li>123123124124123123</li>
            </ul>
          </cube-slide-item>
          <cube-slide-item>
            asdghashdgjasjhd
          </cube-slide-item>
          <cube-slide-item>
            <HelloWorld></HelloWorld>
          </cube-slide-item>
        </cube-slide>
      </div>

js

js

data () {
    return {
      index: 0,
      tabs: [{
        label: '商品'
      }, {
        label: '评价'
      }, {
        label: '商家'
      }],
      slideOptions: {
        listenScroll: true, // 是否监控scroll事件
        probeType: 3, // 0 不派发scroll事件，1：非实时；2：滑动过程中；3：不仅在屏幕滑动的过程中，而且momentum 滚动动画运行过程中实时派发
        directionLockThreshold: 0
      }
    }
  },
  components: {
    HelloWorld  //这里是新建vue-cli出来的组件。直接拿来用
  },
  methods: {
    onScroll (pos) {
      // cube-slide的scroll事件，滚动中实时派发，获取到滚动位置的坐标值，也可以传值x,y来获取
      // 滚动slide的时候，tab实时改变
      // 原理是：先获取tabBar和slide的宽度，然后获取到滚动位置的坐标值，坐标值/slideWidth得到滚动的比例，然后*tabBarWidth,实时得到
      // tab下划线的滚动位置
      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)  // 调用cube-tab的setSliderTransform方法，参数就是上面得到的值
    },
    onChange (current) {
      // silde 页面切换时触发change事件，返回当前的索引值,然后赋值给this.index
      // this.index改变的话，会触发selectedLabel重新计算，然后cube-tab就会进行新的计算，就可以完成切换了
      this.index = current 
    }
  },
  computed: {
    selectedLabel: {
      get () {
        return this.tabs[this.index].label
      },
      // 点击tab的时候设置selectedLabel，
      // 计算当前index是什么，
      set (newVal) {
        this.index = this.tabs.findIndex((value) => {
          return value.label === newVal
        })
      }
    }
  },