vue实现公告/消息无缝滚动效果

最新推荐文章于 2024-08-16 23:32:07 发布

栗子One

最新推荐文章于 2024-08-16 23:32:07 发布

阅读量2.8k

点赞数

分类专栏：可能以后还会用到文章标签： vue javascript

本文链接：https://blog.csdn.net/onelizi/article/details/123690650

版权

可能以后还会用到专栏收录该内容

15 篇文章 1 订阅

订阅专栏

首先html部分

 <div class="top-div-top">系统公告</div>
          <div class="top-div-middle" id="wrapper">
            <ul id="con1" ref="con1">
              <li v-for="(item, index) in items" :key="index" @click="viewDetails(item)">
                <h4 style="display: flex; color: #000; margin: 0">
                  <div class="con1-div-top">○ {{ item.title }}</div>
                  <div style="flex: 3; text-align: right">{{ item.date }}</div>
                </h4>
                <div class="con1-div-bottom">&emsp;&emsp;{{ item.center }}</div>
              </li>
            </ul>

            <ul id="con2" v-show="isRollShow">
              <li v-for="(item, index) in items" :key="index" @click="viewDetails(item)">
                <h4 style="display: flex; color: #000; margin: 0">
                  <div class="con1-div-top">○ {{ item.title }}</div>
                  <div style="flex: 3; text-align: right">{{ item.date }}</div>
                </h4>
                <div class="con1-div-bottom">&emsp;&emsp;{{ item.center }}</div>
              </li>
            </ul>
          </div>

然后js部分

  mounted() {
    this.scroll()
  },


  methods: {

    isRollShow: false,//如果内容没有超出第二份设置隐藏

    scroll() {
      const speed = 100
      const wrapper = document.getElementById('wrapper')
      const ListOne = document.getElementById('con1')
      const Listtwo = document.getElementById('con2')
      console.log(con1.offsetHeight >= wrapper.offsetHeight)
      // 内容超出才执行滚动
      if (con1.offsetHeight >= wrapper.offsetHeight) {
        this.isRollShow = true  //显示内容
        function Marquee() {
          if (Listtwo.offsetHeight - wrapper.scrollTop <= 0) {
            wrapper.scrollTop -= ListOne.offsetHeight
          } else {
            wrapper.scrollTop += 1
          }
        }
        let MyMar = setInterval(Marquee, speed)
        wrapper.onmouseover = function () {
          clearInterval(MyMar)
        }
        wrapper.onmouseout = function () {
          MyMar = setInterval(Marquee, speed)
        }
      }
    },

}

有试过用 cloneNode(true) 来复制节点,但是事件没有复制过去,innerHTML也是一样事件复制不过去,就想到了渲染两份数据可以实现无缝滚动并且可以触发事件

如果有更好的办法可以指教