消息通知无缝滚动

开发项目时候，有个需要是对于未读消息进行一个纵向的轮播，播到某条消息时，需要停留一会会。

 

 

 

<template>
  <div class="module">
    <div class="list-wrap">
      <img class="vocal" src="@/assets/home/vocal.png" alt="" />
      <div class="notices-list-wrap">
        <div
          class="notices-list-content"
          :style="{transform: `translateY(${-(listActiveIndex * parseFloat(itemHeight))}px)`}"
        >
          <!-- 所有消息for循环 -->
          <div class="text text-ellipsis" v-for="(notic, index) in state.list" :key="index">
            {{ notic.messageTitle }}
          </div>
          <!-- 为了无缝，需要重复第一条 -->
          <div class="text text-ellipsis" v-for="(notic, index) in [state.list[0]].filter((one) => one)" :key="index">
            {{ notic.messageTitle }}
          </div>
        </div>
      </div>
      <img class="link" src="@/assets/home/link.png" alt="" @click="linkClick" />
    </div>
  </div>
</template>
<script setup>
import {onMounted, reactive, ref, watch} from 'vue';
const state = reactive({
  list: [],
});
const isScroll = ref(true);// 是否允许滚动不暂停
const listActiveIndex = ref(-1); // 当前展示的下标
const itemHeight = '22px'; // 每条消息的高度，这个还可用于下面style作为样式变量
const transition = ref('all 0.5s ease');
let timer = null;
const setTimer = () => {
  timer && clearInterval(timer);
  timer = setInterval(() => {
    transition.value = 'all 0.5s ease';
    clearInterval(timer);
　　

// 有些情况可能需要暂停不滚动,比如鼠标悬浮之类的，这个看具体业务

if(!isScroll.value&&listActiveIndex.value>-1){

this.setTimer();

return

}

    listActiveIndex.value++;
    /* setTimeout用于停留在某个消息上，设置的是停留1500ms */
    setTimeout(() => {
      /* 这个是关键！！！ 如果已经滚动最后一条，需要修改下标为0，这时候还需要把动画去掉，不然动画会错乱！！！ */
      if (listActiveIndex.value === state.list.length) {
        transition.value = 'all 0s ease';
        listActiveIndex.value = 0;
      }
      setTimer();
    }, 1500);
  }, 500);
};
const getlist = () => {
  let title = '我是消息滚动';
  for (let i = 0; i < 5; i++) {
    state.list.push({messageTitle: i + 1 + title});
  }
  listActiveIndex.value = -1;
  setTimer();
};
onMounted(() => {
  getlist();
});
const itemClick = (item) => {};
</script>
<style lang="less" scoped>
.module {
  box-sizing: border-box;
  background: green;
  padding: 30px 0;
  .list-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    height: 40px;
    border-radius: 20px;
    padding: 0 12px;
    background: #fff;
    img {
      &.vocal {
        width: 29px;
        height: 21px;
        margin-right: 7px;
      }
      &.link {
        width: 20px;
        height: 20px;
      }
    }
    .notices-list-wrap {
      flex: 1;
      overflow: hidden;
      height: v-bind(itemHeight);
      .notices-list-content {
        transition: v-bind(transition);
        .text {
          font-size: 14px;
          font-weight: 400;
          color: #303133;
          line-height: v-bind(itemHeight);
        }
      }
    }
  }
}
</style>