页面滚动时自动切换Tab标签,点击标签自动滚动页面

ゝ一世哀愁。 2024-03-23 15:16 104阅读 0赞

以下是完整代码：

\{ \{ item \}\}

</div>

</div>

</div>

</template>

export default \{

data() \{

return \{

tabs: \['tab1', 'tab2', 'tab3'\],

active: 0,

cont1: null,

cont2: null,

cont3: null,

isClickTab: false,

\};

\},

methods: \{

backTop() \{

// 回到顶部

this.cont1.scrollIntoView(\{

block: 'start',

behavior: 'smooth',

\});

\},

switchTab(index) \{

// 根据当前index切换到对应的页面内容

if (index === 0) \{

this.cont1.scrollIntoView(\{

block: 'start',

behavior: 'smooth',

\});

\} else if (index === 1) \{

this.cont2.scrollIntoView(\{

block: 'start',

behavior: 'smooth',

\});

\} else \{

this.cont3.scrollIntoView(\{

block: 'start',

behavior: 'smooth',

\});

\},

mounted() \{

this.cont1 = this.$refs\['cont\_1'\];

this.cont2 = this.$refs\['cont\_2'\];

this.cont3 = this.$refs\['cont\_3'\];

const tabH = this.$refs\['tab'\].offsetHeight;

// 添加scroll事件监听

this.$refs\['cont'\].addEventListener('scroll', () => \{

if (this.cont3.getBoundingClientRect().top <= tabH) \{

this.active = 2;

return false;

if (this.cont2.getBoundingClientRect().top <= tabH) \{

this.active = 1;

return false;

if (this.cont1.getBoundingClientRect().top <= tabH) \{

this.active = 0;

\});

\},

\};

</script>

.box \{

font-size: 28px;

overflow-x: auto;

height: 100vh;

display: -webkit-flex;

display: flex;

flex-direction: column;

overflow-y: hidden;

.tab \{

height: 88px;

background: \#fff;

line-height: 88px;

color: \#666;

display: -webkit-flex;

display: flex;

justify-content: space-around;

.active \{

font-size: 32px;

color: \#333;

&::after \{

display: block;

content: '';

width: 36px;

height: 6px;

margin: auto;

margin-top: -10px;

background: rgba(255, 51, 0, 1);

border-radius: 3px;

.cont \{

height: 300px;

flex-grow: 1;

overflow: auto;

.cont\_1 \{

height: 400px;

background: pink;

.cont\_2 \{

height: 800px;

background: yellow;

.cont\_3 \{

height: 100%;

background: lightgreen;

.back-top \{

width: 80px;

height: 80px;

border-radius: 50%;

position: fixed;

bottom: 120px;

right: 32px;

</style>

页面滚动时自动切换Tab标签,点击标签自动滚动页面

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关页面滚动时自动切换Tab标签,点击标签自动滚动页面

相关 Tab页切换时页面自动刷新效果

相关 html页面自动滚动+点击停止滚动

相关 vue--记住页面的滚动高度，再次返回该页面时自动滚动到当前高度

相关 vue点击tab列表滚动对应位置，滚动列表也可切换tab

相关 jquery设置点击标签，标签滚动到页面顶部

相关页面滚动的时候自动切换导航栏

相关 vue中使用vue-router切换页面时滚动条自动滚动到顶部的方法

相关 ionic 监听页面滚动，点击停止滚动

相关 a标签滚动页面到指定位置