vue框架Vant--Tab选项卡悬停头部
template模块代码<template><div><div><div ref="getheight" style="height:50px;background:#f00">固定栏</div><van-tabs@click="onClick":st...
·
template模块代码
<template>
<div>
<div>
<div ref="getheight" style="height:50px;background:#f00">固定栏</div>
<van-tabs
@click="onClick"
:sticky="true"
:duration="0"
:swipe-threshold="5"
:offset-top="this.heightall"
class="seckilling-tab"
>
<van-tab v-for="(item,index) in tabs" :key="index" :title="tabs[index]">
<div style="height:1000px">内容{{index}}</div>
</van-tab>
</van-tabs>
</div>
</div>
</template>
js模块代码
<script>
export default {
data() {
return {
heightall: 0,
tabs: {
0: '选项0',
1: '选项1',
2: '选项2',
3: '选项3',
4: '选项4'
}
}
},
mounted() {
this.$nextTick(function() {
this.heightall = this.$refs.getheight.offsetHeight
console.log(this.heightall)
})
},
methods: {
onClick(name) {}
}
}
</script>
效果
更多推荐
已为社区贡献3条内容
所有评论(0)