动态设置无缝滚动轮播图（垂直滚动）

前提：
列表数量不确定，列表的内容高度不确定

      <div
        ref="contentItem"
        id="contentId"
        class="content"
        :style="{
          animation: `scroll ${partyList.length}s 2s linear infinite`,
        }"
      >
      <li v-for="(item) in data" class=“item”></li>
      或者是用div标签
       </div>

第一步，要获取列表的高度

注意：在生命周期created和mounted里面是无法获取到动态渲染的dom的
所以
我将这两个函数的调用放在了data数据返回成功之后
利用了$nextTick

            // // 添加滚动动画
          //   this.$nextTick(()=>{
          //   this.heightFn();
          //   })

``
// console.log(document.getElementsByClassName(“item”));
//拿到元素
// let contentHeight = 0;
// let list = document.getElementsByClassName(“item”);
// for (let i = 0; i < this.partyList.length; i++) {
//获取总的高度
//注意区分offsetHeight和scrollHeight的区别
// contentHeight += list[i].scrollHeight;
// }

offsetHeight：自身的高度包含内边距（padding）和边框（border）
scrollHeight：自身的高度+隐藏元素的高度

如果还有外边距，记得加上

我是封装成了两个函数，一个是获取高度，一个是动态添加动画

// 获取内容高度
heightFn() {
// 删除多余的之前的scroll动画，否则会覆盖新的动画
document.styleSheets[0]?.cssRules.forEach((it, index) => {
if (it?.name === “scroll”) {
document.styleSheets[0].deleteRule(index);
}
});
let contentHeight = 0;
let list = document.getElementsByClassName(“item”);
for (let i = 0; i < this.partyList.length; i++) {
contentHeight = contentHeight + list[i].offsetHeight + 10;
}
console.log(“高度”, contentHeight);
if (contentHeight > document.getElementById(“contentId”).offsetHeight) {
//调用动态添加动画的方法
this.addKeyFrames(contentHeight);
}
},

然后动态添加动画

 // 动态添加动画
addKeyFrames(event) {
  console.log("addKeyFrames", event);
  // 写入样式
  document.styleSheets[0].insertRule(
    `@keyframes scroll {0% {transform: translateY(0);}
    100% {
      transform: translateY(-${event}px);
    }}`
  );
},```