vue实现消息逐条轮播，向上滚动，前端css实现消息轮播

 我们用css和来实现，核心在于transition属性的使用，该属性的具体用法可以自行搜索，我们直接上代码

布局部分：

<div class="scroll">
    <van-row class="background" type="flex" justify="space-between">
      <van-col span="2" style="height: 40px">
        <van-image style="width: 20px;height: 20px;margin-top: 10px;margin-left: 12px" radius fit="cover" :src="require('../../../assets/image/ic_notice.png')"></van-image>
      </van-col>
      <van-col span="21">
        <ul id="ulll" :class="{ anim: animate == true }">
          <li v-for="(item, index) in items" :key="index">
            <van-row type="flex" justify="space-between">
              <van-col span="5" class="single_line">
                {{"["+ item.userName + "]" }}
              </van-col>
              <van-col span="13" class="single_line" align="center">
                {{$t('chenggonggoumai_nft')}}
              </van-col>
              <van-col span="6" style="color: #35C79B;padding-right: 8px" class="single_line" align="end">
                {{ item.time + $t('fenzhongqian') }}
              </van-col>
            </van-row>
          </li>
        </ul>
      </van-col>
    </van-row>

</div>

js部分：

export default {
  name: "NoticeScorll",
  data(){
    return{
      animate: false,
      items: [
        {userName:'小明',time:1},
        {userName:'小明1',time:2},
        {userName:'小明2',time:3},
      ],
    }
  },
  created() {
    this.getScrollMessage()
  },
  methods: {
    scroll() {
      this.animate = true; // 为true时将动画样式赋值给布局，见布局处引用
      setTimeout(() => {
        //  这里直接使用了es6箭头写法，省去了处理this指向偏移问题
        this.items.push(this.items[0]); // 将数组的第一个元素添加到数组的
        this.items.shift(); //删除数组的第一个元素
        this.animate = false; // margin-top为0的时候取消过渡动画，实现无缝滚动
      }, 500);//每条滚动时长0.5s
    },
    getScrollMessage(){
      //这里用网络请求替换真实数据，把下面的代码放到响应成功的线程里
      setInterval(this.scroll, 2000);
    },
  },
}

css部分（关键）：

.scroll {
  /*几个高度要一致*/
  height: 40px;
  font-family: SourceHanSansSC-Regular;
  font-size: 10px;
  font-weight: normal;
  font-stretch: normal;
  line-height: 0vw;
  letter-spacing: 0vw;
  color: #666666;
  overflow: hidden;
}
.anim {
  transition: all 0.5s;
  /*几个高度要一致*/
  margin-top: -40px;
}
#ulll li {
  list-style: none;
  /*几个高度要一致*/
  line-height: 40px;
  /*几个高度要一致*/
  height: 40px;
}
.background{
  background: #FFFFFF;
  border-radius: 8px;
  height: 40px;
}
.single_line {
    white-space:nowrap;	/*溢出不换行*/
    text-overflow: ellipsis;
    overflow:hidden;/*溢出部分隐藏*/
    line-clamp:1;
    -webkit-line-clamp:1;				/*显示的行数*/

}

布局处用了vant的layout栅格布局（van-row、van-col），方便横向排布，不愿意用vant的可以用css手写样式。