消息

liuqimichale
1 parent 2241e670
Showing 3 changed files with 80 additions and 19 deletions
src/assets/img/noticetype.png
src/views/mainContainer.vue
src/views/newssection.vue
@@ -13,7 +13,7 @@
       <li>
         <sfysection class="sectionsmall"></sfysection>
         <berthsection class="sectionsmall margin12-0"></berthsection>
-        <newssection class="sectionsmall"></newssection>
+        <newssection class="sectionsmall" ></newssection>
       </li>
     </ul>
     <loadinggif :showLoading="showLoaddingGif"></loadinggif>
 <template>
-  <div>
+  <div >
     <titlesection title="消息"></titlesection>
-    <ul class="flexfm news-wrap">
-
-    </ul>
+      <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}">
+              <span class="noticetype"></span>
+              <span class="text" :title="item.site">{{item.site}}</span>
+              <span class="time">{{item.gsmc}}</span>
+          </li>
+        </ul>
+      </div>
   </div>
 </template>
  
 <script>
 import titlesection from '../components/titlesection'
-import {fetchList} from '../api/api'
  
 export default {
   name: 'newssection',
@@ -18,27 +23,83 @@ export default {
   },
   data() {
     return {
-      totalVal: '21973',
-      free: '454123',
-      nofree: '5125'
+      animate: true,
+      list: [
+        { "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" },
+        { "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" },
+        { "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" },
+        { "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" },
+        { "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" },
+        { "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" },
+        { "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" },
+        { "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" },
+        { "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" },
+        { "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" },
+        { "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" }
+      ]
     }
   },
   created() {
+    setInterval(this.scroll, 2000)
   },
   methods: {
-    getList() {
-      fetchList()
-      .then(res => {
-        console.log(res);
-
-      });
-    },
+    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>
-  .news-wrap {
+<style lang="scss" scoped>
+    .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;
+        .noticetype{
+          margin-left: 23px;
+          margin-right: 23px;
+          width: 26px;
+          height: 26px;
+          background: url("../assets/img/noticetype.png") no-repeat;
+        }
+        .errortype{
+          margin-left: 23px;
+          margin-right: 23px;
+          width: 26px;
+          height: 26px;
+          background: #f00;
+        }
+        .text{
+          width:calc(100% - 100px);
+          overflow:hidden;
+          text-overflow:ellipsis;
+        }
+        .time{
+          padding-left: 23px;
+          width: 65px;
+        }
+      }
+    }
+    .anim {
+       transition: all 0.5s;
  
-  }
+    }
 </style>