直播系统源代码，vue实现无缝滚动

直播系统源代码，vue实现无缝滚动

一、采用js的方法实现

 

1

<br><template><br><div><br><div class="box"><br><div v-for="item in 2" class="item-box" :style="{transform:'translate(0,'+scrollTop+'px)'}"><br><div class="item" v-for="i in 9">{{i}}</div><br></div><br></div><br></div><br></template><br> <br><script><br>export default {<br>data() {<br>return {<br>scrollTop: 0,<br>}<br>},<br>onLoad() {<br>this.roll()<br>},<br>methods: {<br>roll() {<br>if (this.scrollTop == -300) {<br>this.scrollTop = 0<br>}<br>this.scrollTop -= 1;<br>setTimeout(() => {<br>this.roll()<br>}, 10)<br>},<br>}<br>}<br></script><br><style><br>.box {<br>width: 320px;<br>height: 300px;<br><br>overflow: hidden;<br>}<br> <br>.box .item-box {<br>width: 100%;<br>height: 100%;<br>display: flex;<br>align-items: center;<br>justify-content: center;<br>flex-wrap: wrap;<br>}<br> <br>.box .item-box .item {<br>width: 29%;<br>height: 29%;<br>margin: 1%;<br>background-color: paleturquoise;<br>display: flex;<br>align-items: center;<br>justify-content: center;<br>font-weight: 700;<br>}<br></style>

​

二、css动画实现

 

1

<br><template><br><div><br><div class="box"><br><div v-for="item in 2" class="item-box"><br><div class="item" v-for="i in 9">{{i}}</div><br></div><br></div><br></div><br></template><br> <br><script><br>export default {<br>data() {<br>return {}<br>},<br>methods: {<br> <br>}<br>}<br></script><br><style><br>.box {<br>width: 320px;<br>height: 300px;<br><br>overflow: hidden;<br>}<br> <br>.box .item-box {<br>width: 100%;<br>height: 100%;<br>display: flex;<br>align-items: center;<br>justify-content: center;<br>flex-wrap: wrap;<br>animation: roll 5s linear infinite;<br>}<br> <br>.box .item-box .item {<br>width: 29%;<br>height: 29%;<br>margin: 1%;<br>background-color: paleturquoise;<br>display: flex;<br>align-items: center;<br>justify-content: center;<br>font-weight: 700;<br>}<br> <br>@keyframes roll {<br>0% {<br>transform: translate(0, 0px);<br>}<br> <br>20% {<br>transform: translate(0, -60px);<br>}<br> <br>40% {<br>transform: translate(0, -120px);<br>}<br> <br>60% {<br>transform: translate(0, -180px);<br>}<br> <br>80% {<br>transform: translate(0, -240px);<br>}<br> <br>100% {<br>transform: translate(0, -300px);<br>}<br>}<br></style>

 

以上就是 直播系统源代码，vue实现无缝滚动，更多内容欢迎关注之后的文章