利用cube-tab-bar 搭配cube-ui的组件(cube-slide ,cube-scroll)来做出App屏幕切换,Tab跟随页面变化效果

  1. 跟随页面左右移动,上方tab跟随,及点击切换效果实现
  2. 利用cube-tab-bar 搭配cube-ui的组件(cube-slide ,cube-scroll)来做出App屏幕切换,Tab跟随页面变化效果

3.代码

<template>
	 <div>
      <div class="hea" >
  <cube-tab-bar 
                    :showSlider="true"
                    v-model="selectedLabel"
                    :data="tabs"
                    ref="tabBar"
                    class="border-bottom-1px" >
      </cube-tab-bar>
      </div>
       <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" ><!--show-dots=是否显示轮播指示点;loop:是否循环播放-->
          <cube-slide-item > <!--每一个tab页面,自己写页面就行-->
           冰壶
          </cube-slide-item>
          <cube-slide-item >
            滑冰
          </cube-slide-item>
          <cube-slide-item >
            雪橇
          </cube-slide-item>
          <cube-slide-item>
             高山滑雪
          </cube-slide-item>
          <cube-slide-item>
           北欧
          </cube-slide-item>
       
         
          
        </cube-slide>
      </div>


</div>
</template>
<script>
export default {
data () {
    return {
      index: 0,//索引,用来转换tab标识
      tabs: [ {
        label: '冰壶'
      }, {
      
        label: '滑冰'
      }, {
      
        label: '雪橇'
      }, {
      
        label: '高山滑雪'
      }, {
      
        label: '北欧'
      }, ],
      slideOptions: {
        listenScroll: true, // 监控scroll事件
        probeType: 3, // 0 不派发scroll事件,1:非实时;2:滑动过程中;3:不仅在屏幕滑动的过程中,而且momentum 滚动动画运行过程中实时派发
        directionLockThreshold: 0 //当我们需要锁定只滚动一个方向的时候,我们在初始滚动的时候根据横轴和纵轴滚动的绝对值做差,当差值大于 directionLockThreshold 的时候来决定滚动锁定的方向。
      }
    }
  },

   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) {
      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
        })
      }
    }
  },



}
</script>
上一篇:cube.js playground 使用的一些问题


下一篇:cube可信框架踩坑指南