src/views/newssection.vue

<template>
  <div >
    <titlesection title="消息"></titlesection>
      <div class="nwwest-roll flexfm news-wrap" id="nwwest-roll">
        <ul id="roll-ul">  
          <li v-for="item in list" ref="rollul" :class="{anim:animate==true}">
              <div class="noticetype1" v-if="item.type===1"></div>
              <div class="noticetype2" v-else-if="item.type===2"></div>
              <div class="errortype1" v-else-if="item.type===3"></div>
              <div class="errortype2" v-else></div>
              <div class="text" :title="item.site">{{item.site}}</div>
              <div class="time">{{item.gsmc}}</div>
          </li>
        </ul>
      </div>
  </div>
</template>
<script>
import titlesection from '../components/titlesection'
export default {
  name: 'newssection',
  components: {
    titlesection
  },
  data() {
    return {
      animate: true,
      list: [
        {"type":1, "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" },
        {"type":2, "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" },
        {"type":3, "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" },
        {"type":4, "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" },
        {"type":1, "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" },
        {"type":2, "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" },
        {"type":3, "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" },
        {"type":4, "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" },
        {"type":1, "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" },
        {"type":2, "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" },
        {"type":3, "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" }
      ]
    }
  },
  created() {
    setInterval(this.scroll, 2000)
  },
  methods: {
    scroll() {
      let con1 = this.$refs.rollul;
      con1[0].style.marginTop = '30px';
      this.animate = !this.animate;
      var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
      setTimeout(function () {
        that.list.push(that.list[0]);
        that.list.shift();
        con1[0].style.marginTop = '0px';
        that.animate = !that.animate;  // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
      }, 0)
    }
  }
}
</script>
<style lang="scss" scoped>
    @mixin newsType($img){
      margin-left: 23px;
      margin-right: 23px;
      width: 26px;
      height: 26px;
      background-image: url($img);
      background-repeat:no-repeat ;
    }
    .nwwest-roll {
      width: 100%;
      height: 210px;
      overflow: hidden;
      transition: all 0.5s;
      li{
        height: 26px;
        line-height: 26px;
        font-size: 12px;
        color: #fff;
        display: flex;
        background:rgba(255,255,255,.1);
        margin-bottom: 10px;
        .noticetype1{
          @include newsType("../assets/img/noticetype1.png");
        }
        .noticetype2{
          @include newsType("../assets/img/noticetype2.png");
        }
        .errortype1{
          @include newsType("../assets/img/errortype1.png");
        }
        .errortype2{
          @include newsType("../assets/img/errortype1.png");
        }
        .text{
          width:calc(100% - 100px);
          overflow:hidden;
          text-overflow:ellipsis;
        }
        .time{
          padding-left: 23px;
          width: 65px;
        }
      }
    }
    .anim {
       transition: all 0.5s;
    }
</style>