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