BJ_web_developers / dyitoc

  <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() {

        this.animate = !this.animate;
        var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
        setTimeout(function () {
          that.list.push(that.list[0]);
          that.list.shift();

          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 ;

        background-position: center center ;

      }

      .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>