本文实例为大家分享了vue实现消息向上无缝滚动效果的具体代码,供大家参考,具体内容如下

代码:
- <ul class="new-list" :class="{anim:animate}" @mouseenter="Stop()" @mouseleave="Up()">
- ? <li v-for="item in noticeList">
- ? ? ...
- ? </li>
- </ul>
- <script>
- ? export default {
- ? ? data() {
- ? ? ? return {
- ? ? ? ? noticeList: [],
- ? ? ? ? animate:false,
- ? ? ? ? intNum: undefined,
- ? ? ? }
- ? ? },
- ? ? created: function () {
- ? ? ? this.getNoticeData();
- ? ? },
- ? ? methods: {
- ? ? ? getNoticeData() {
- ? ? ? ? this.$http.get('/news/allList', {
- ? ? ? ? ? params: {
- ? ? ? ? ? ? 'pageNumber': 10,
- ? ? ? ? ? ? 'currentPage': 1
- ? ? ? ? ? }
- ? ? ? ? }).then(res => {
- ? ? ? ? ? this.noticeList = res.data.items;
- ? ? ? ? ? this.ScrollUp();
- ? ? ? ? });
- ? ? ? },
- ? ? ? ScrollUp() {
- ? ? ? ? this.intNum = setInterval(() => {
- ? ? ? ? ? this.animate=true;// 向上滚动的时候需要添加css3过渡动画
- ? ? ? ? ? setTimeout(()=>{
- ? ? ? ? ? ? this.noticeList.push(this.noticeList[0]);// 将数组的第一个元素添加到数组的
- ? ? ? ? ? ? this.noticeList.shift(); //删除数组的第一个元素
- ? ? ? ? ? ? this.animate=false;
- ? ? ? ? ? },500)
- ? ? ? ? }, 10000);
- ? ? ? },
- ? ? ? //鼠标移上去停止
- ? ? ? Stop() {
- ? ? ? ? clearInterval(this.intNum);
- ? ? ? },
- ? ? ? Up() {
- ? ? ? ? this.ScrollUp();
- ? ? ? },
- ? ? }
- ? }
- </script>
样式
- .new-list{
- ? ? line-height: 28px;
- ? ? transition: top 0.5s;
- }
- .anim{
- ? ? transition: all 0.5s;
- ? ? margin-top: -28px;//高度等于行高
- }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持w3xue。