通过绑定类名来实现锚点(不使用ref)
有个需求是数据全是动态的,还有分类,本来只做展示是很容易的,但是现在数据的分类都是不确定的,还需要在一整个页面右下角做一个小导航的锚点,本来想着可是用ref的绑定实现,可是呢,,
vue的语法是通过ref来实现锚点,但是ref都是已经确定的了,不太适用于动态绑定的,于是只有通过绑定类名了
第一
先给右下角的小导航做一个点击事件 @click=“scrollToTag(item)”
事件处理跳转的高度
scrollToTag(tag) {
let $el = $(this.$el)
let $tag_content = $el.find('.love-bd .tag-item-' + tag.firstCid)
//.love-bd 是总的div类名
// div下面用template模板来展示所有数据
//.tag-item-' + tag.firstCid 是具体的标题绑定的类名
let contentTop = $tag_content.position().top
$('html,body').animate({ scrollTop: contentTop }, 100)
},
第二
给分类的标题 动态绑定类名
<ul
class="love-list"
:key="sort.firstCid"
:class="['', `tag-item-${sort.firstCid}`]"
>
这样就可以实现锚点了