Vue项目中在页面上添加自定义目录
1、项目需求:页面左侧网页内容太多,所以想在页面右侧添加一个自定义的目录,目录名对应左侧内容的小标题,点击目录左侧页面滚动到对应的内容。2、给页面左侧的内容的每个小标题添加一个data-ref属性3、等左侧文章加载完成之后,用setTimeout定时器把左侧的ref属性push进一个空的数组。setTimeout(function(){$('.block-l ....
·
1、项目需求:页面左侧网页内容太多,所以想在页面右侧添加一个自定义的目录,目录名对应左侧内容的小标题,点击目录左侧页面滚动到对应的内容。
2、给页面左侧的内容的每个小标题添加一个data-ref属性
3、等左侧文章加载完成之后,用setTimeout定时器把左侧的ref属性push进一个空的数组。
setTimeout(function(){
$('.block-l .block').map(function(index, item){
_this.cataloglist.push({
'ref': $(item).data('ref'),
'name': $(item).find('.title').text(),
'show': true
});
});
}, 500);
4、在push完成后的数组里循环得到页面右侧的目录内容
<div class="catalog">
<h3 class="title">目录</h3>
<ul class="linklist" id="menu">
<li v-for="(item,index) in cataloglist" @click="catalogTo(item.ref);navtab(index)">
<a>{{item.name}}</a>
</li>
</ul>
</div>
5、然后点击某个目录时把item.ref传参进catalogTo()函数,保证左面的内容滚动到制定的位置
// 点击目录定位到对应项
'catalogTo': function(ref) {
if(ref === 'top'){
$(window).scrollTop(0);
}
else if(this.$refs[ref] instanceof Array){
$(window).scrollTop(this.$refs[ref][0].offsetTop);
}
else{
$(window).scrollTop(this.$refs[ref].offsetTop);
}
},
6、注意scrollTop()和offsetTop()的用法
更多推荐
已为社区贡献4条内容
所有评论(0)