Commit 9598d2c1549f39eb310872ae7f65380a47a3d280
1 parent
2241e670
消息
Showing
3 changed files
with
80 additions
and
19 deletions
src/assets/img/noticetype.png
0 → 100644
959 Bytes
src/views/mainContainer.vue
| @@ -13,7 +13,7 @@ | @@ -13,7 +13,7 @@ | ||
| 13 | <li> | 13 | <li> |
| 14 | <sfysection class="sectionsmall"></sfysection> | 14 | <sfysection class="sectionsmall"></sfysection> |
| 15 | <berthsection class="sectionsmall margin12-0"></berthsection> | 15 | <berthsection class="sectionsmall margin12-0"></berthsection> |
| 16 | - <newssection class="sectionsmall"></newssection> | 16 | + <newssection class="sectionsmall" ></newssection> |
| 17 | </li> | 17 | </li> |
| 18 | </ul> | 18 | </ul> |
| 19 | <loadinggif :showLoading="showLoaddingGif"></loadinggif> | 19 | <loadinggif :showLoading="showLoaddingGif"></loadinggif> |
src/views/newssection.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div> | 2 | + <div > |
| 3 | <titlesection title="消息"></titlesection> | 3 | <titlesection title="消息"></titlesection> |
| 4 | - <ul class="flexfm news-wrap"> | ||
| 5 | - | ||
| 6 | - </ul> | 4 | + <div class="nwwest-roll flexfm news-wrap" id="nwwest-roll"> |
| 5 | + <ul id="roll-ul"> | ||
| 6 | + <li v-for="item in list" ref="rollul" :class="{anim:animate==true}"> | ||
| 7 | + <span class="noticetype"></span> | ||
| 8 | + <span class="text" :title="item.site">{{item.site}}</span> | ||
| 9 | + <span class="time">{{item.gsmc}}</span> | ||
| 10 | + </li> | ||
| 11 | + </ul> | ||
| 12 | + </div> | ||
| 7 | </div> | 13 | </div> |
| 8 | </template> | 14 | </template> |
| 9 | 15 | ||
| 10 | <script> | 16 | <script> |
| 11 | import titlesection from '../components/titlesection' | 17 | import titlesection from '../components/titlesection' |
| 12 | -import {fetchList} from '../api/api' | ||
| 13 | 18 | ||
| 14 | export default { | 19 | export default { |
| 15 | name: 'newssection', | 20 | name: 'newssection', |
| @@ -18,27 +23,83 @@ export default { | @@ -18,27 +23,83 @@ export default { | ||
| 18 | }, | 23 | }, |
| 19 | data() { | 24 | data() { |
| 20 | return { | 25 | return { |
| 21 | - totalVal: '21973', | ||
| 22 | - free: '454123', | ||
| 23 | - nofree: '5125' | 26 | + animate: true, |
| 27 | + list: [ | ||
| 28 | + { "name": "于先生1", "site": "北京门头沟区1北京门头沟区1北京门头沟区1", "gsmc": "10-02" }, | ||
| 29 | + { "name": "于先生2", "site": "北京门头沟区2", "gsmc": "10-02" }, | ||
| 30 | + { "name": "于先生3", "site": "北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3北京门头沟区3", "gsmc": "10-02" }, | ||
| 31 | + { "name": "于先生4", "site": "北京门头沟区4", "gsmc": "10-02" }, | ||
| 32 | + { "name": "于先生5", "site": "北京门头沟区5", "gsmc": "10-02" }, | ||
| 33 | + { "name": "于先生6", "site": "北京门头北京门头沟区6北京门头沟区6北京门头沟区6北京门头沟区6沟区6", "gsmc": "10-02" }, | ||
| 34 | + { "name": "于先生7", "site": "北京门头沟区7", "gsmc": "10-02" }, | ||
| 35 | + { "name": "于先生8", "site": "北京门头沟区8", "gsmc": "10-02" }, | ||
| 36 | + { "name": "于先生9", "site": "北京门头北京门头沟区9北京门头沟区9北京门头沟区9沟区9", "gsmc": "10-02" }, | ||
| 37 | + { "name": "于先生10", "site": "北京门头沟区10", "gsmc": "10-02" }, | ||
| 38 | + { "name": "于先生11", "site": "北京门北京门头沟区11北京门头沟区11北京门头沟区11头沟区11", "gsmc": "10-02" } | ||
| 39 | + ] | ||
| 24 | } | 40 | } |
| 25 | }, | 41 | }, |
| 26 | created() { | 42 | created() { |
| 43 | + setInterval(this.scroll, 2000) | ||
| 27 | }, | 44 | }, |
| 28 | methods: { | 45 | methods: { |
| 29 | - getList() { | ||
| 30 | - fetchList() | ||
| 31 | - .then(res => { | ||
| 32 | - console.log(res); | ||
| 33 | - | ||
| 34 | - }); | ||
| 35 | - }, | 46 | + scroll() { |
| 47 | + let con1 = this.$refs.rollul; | ||
| 48 | + con1[0].style.marginTop = '30px'; | ||
| 49 | + this.animate = !this.animate; | ||
| 50 | + var that = this; // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向 | ||
| 51 | + setTimeout(function () { | ||
| 52 | + that.list.push(that.list[0]); | ||
| 53 | + that.list.shift(); | ||
| 54 | + con1[0].style.marginTop = '0px'; | ||
| 55 | + that.animate = !that.animate; // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了 | ||
| 56 | + }, 0) | ||
| 57 | + } | ||
| 36 | } | 58 | } |
| 37 | } | 59 | } |
| 38 | </script> | 60 | </script> |
| 39 | 61 | ||
| 40 | -<style lang="scss" scoped> | ||
| 41 | - .news-wrap { | 62 | +<style lang="scss" scoped> |
| 63 | + .nwwest-roll { | ||
| 64 | + width: 100%; | ||
| 65 | + height: 210px; | ||
| 66 | + overflow: hidden; | ||
| 67 | + transition: all 0.5s; | ||
| 68 | + li{ | ||
| 69 | + height: 26px; | ||
| 70 | + line-height: 26px; | ||
| 71 | + font-size: 12px; | ||
| 72 | + color: #fff; | ||
| 73 | + display: flex; | ||
| 74 | + background:rgba(255,255,255,.1); | ||
| 75 | + margin-bottom: 10px; | ||
| 76 | + .noticetype{ | ||
| 77 | + margin-left: 23px; | ||
| 78 | + margin-right: 23px; | ||
| 79 | + width: 26px; | ||
| 80 | + height: 26px; | ||
| 81 | + background: url("../assets/img/noticetype.png") no-repeat; | ||
| 82 | + } | ||
| 83 | + .errortype{ | ||
| 84 | + margin-left: 23px; | ||
| 85 | + margin-right: 23px; | ||
| 86 | + width: 26px; | ||
| 87 | + height: 26px; | ||
| 88 | + background: #f00; | ||
| 89 | + } | ||
| 90 | + .text{ | ||
| 91 | + width:calc(100% - 100px); | ||
| 92 | + overflow:hidden; | ||
| 93 | + text-overflow:ellipsis; | ||
| 94 | + } | ||
| 95 | + .time{ | ||
| 96 | + padding-left: 23px; | ||
| 97 | + width: 65px; | ||
| 98 | + } | ||
| 99 | + } | ||
| 100 | + } | ||
| 101 | + .anim { | ||
| 102 | + transition: all 0.5s; | ||
| 42 | 103 | ||
| 43 | - } | 104 | + } |
| 44 | </style> | 105 | </style> |