requestAnimationFrame 实现跑马灯

Posted 2020-11-24 wilsunson

html :

<!-- 公告 -->
        <div class="notice-container" v-show="noticeList.length">
          <span class="notice-icon"></span>
          <div class="notice-items" ref="noticeBox">
            <div class="notice-items-inner" ref="noticeInner">
              <p v-for="(item, index) in noticeList" :key="index">{{item.noticeContent}}</p><p>{{noticeList.length && noticeList[0].noticeContent}}</p> // 两p标签必须粘合一起
            </div>
          </div>
        </div>

js:

// 公告的走马灯
    initNoticeScroll () {
      let boxWidth = this.$refs.noticeBox.offsetWidth
      let innerWidth = 0
      let child = this.$refs.noticeInner.childNodes
      child.forEach(item => {
        innerWidth += item.offsetWidth
      })
      innerWidth += boxWidth * (child.length - 1)
      if (innerWidth > boxWidth) {
        let padding = 0
        let animation = () => {
          padding -= 1
          this.$refs.noticeInner.style.cssText = `transform: translate3d(${padding}px, 0, 0)`
          if (padding === -(innerWidth - child[0].offsetWidth)) {
            padding = 0
            this.$refs.noticeInner.style.cssText = `transform: translate3d(${padding}px, 0, 0)`
          }
          requestAnimationFrame(animation)
        }
        animation()
      }
    },

css:

.notice-container {

opacity: 0.6;
background: #141F33;

      font-size: 12px;
      color: #3E4759;
      height: 30px;
      overflow: hidden;
      box-sizing: border-box;
      width: 100%;
      display: flex;
      align-items: center;
      position: relative;
　　　　color:#fff;
      .notice-icon {
        display: block;
        margin-left: 10px;
        flex-shrink: 0;
        width: 27px;
        height: 27px;
        background: url("../assets/home/icon_home_gg.png") no-repeat;
        background-size: 100% 100%;
      }

      .notice-items {
        margin: 0 0 0 6px;
        flex: 1;
        display: flex;
        overflow: hidden;
        height: 30px;

        .notice-items-inner {
          display: flex;
          align-items: center;
          width: 100%;

          p {
            flex-shrink: 0;
            margin-right: 100%;
            white-space: nowrap;
          }
        }
      }
    }

效果：