vue循环实现锚点点击并平滑过渡

Posted 2021-06-15 野猪佩奇007

项目场景：

pc端项目左侧为类别悬浮，点击右侧中心内容平滑过度到锚点点击位置

---

问题描述：

主要在于不是css实现，css实现很多，但是是vue循环出的，添加各个对应的类名也不同

---

解决方案：

循环给每一个添加点击事件并传入id名称加动态index拼接

<div :class="isname==index?'l-yellow':''" @click="upmaod(index)" 
v-for="(item,index) in shoplist" :key="index">
	<a href="javascript:void(0);" @click="goAnchor('#shoplist'+index)">{{item.name}}</a>
</div>

 <div class="e-product" :id="'shoplist'+index" v-for="(item,index) in shoplist" :key="index">
 //锚点命名id也为动态拼接

:class="isname==index?'l-yellow':''" @click="upmaod(index)" //用于点击改变左侧点击到的样式添加类名

vue js实现：

goAnchor(selector) {
      var anchor = this.$el.querySelector(selector);
      anchor.scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐
      });
    },

即可实现css般丝滑过渡