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

最新推荐文章于 2022-05-20 20:05:02 发布

渊来有你

最新推荐文章于 2022-05-20 20:05:02 发布

阅读量696

点赞数 1

分类专栏：前端文章标签： vue

本文链接：https://blog.csdn.net/weixin_51935690/article/details/115593876

版权

前端专栏收录该内容

20 篇文章 2 订阅

订阅专栏

跟随页面左右移动，上方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>