<template>
<div class=“home”>
<-- 导航菜单-->
<div class="navList">
<p
class="navgatorLi"
v-for="(item,index) in navgator"
:key="index"
@click="handleLeft(index)"
>
{{item.title}}
</p>
</div>
<-- 内容-->
<div class=“content”>
<div id=”id0“>这里是主页</div>
<div id=”id1“>这里是产品介绍</div>
<div id=”id2“>这里是智能单词</div>
<div id=”id3“>这里是智能听说</div>
<div id=”id4“>这里是下载中心</div>
<div id=”id5“>这里是关于我们</div>
</div>
</div>
</template>
export default {
name: 'Home',
data() {
return {
navgator: [
'主页',
'产品介绍',
'智能单词',
'智能听说',
'下载中心',
'关于我们',
],
navgatorIndex: 0
}
},
methods: {
// 点击导航菜单,页面滚动到指定位置
handleLeft (index) {
this.navgatorIndex = index
this.$el.querySelector(`#id${index}`).scrollIntoView({
behavior: "smooth", // 平滑过渡
block: "start" // 上边框与视窗顶部平齐。默认值
})
this.listBoxState=false
let timeId
clearTimeout(timeId)
timeId = setTimeout(() => {
this.listBoxState=true;
},200)
}
}
}
点击导航栏内容,滚动到指定位置
最新推荐文章于 2024-07-01 10:42:12 发布