vue项目新闻消息向上滚动案例

忘是亡心i 2022-11-15 12:22 210阅读 0赞

vue项目新闻消息向上滚动案例

效果如下图所示：  
![在这里插入图片描述][20210401114037365.gif_pic_center]

代码组件如下：

<template>
        <div class="message-page">
            <div class="msg-tit">
                <div class="msg-top">
                    <div class="tit-word">消息通知</div>
                    <div class="tit-more">查看更多></div>
                </div>
                <div class="msg-line"></div>
                <div class="marquee-wrap">
                    <ul class="marquee-list" :class="{'animate-up': animateUp}" @mouseenter="stopFn" @mouseleave="startFn">
                        <li v-for="(item, index) in listData" :key="index">
                            <div >
                                <p class="p-tit">{
       {item.title}}</p>
                                <p class="p-word">
                                    {
       {item.content}}
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </template>
    
    <script>
    
    
      export default {
        name: 'MessagePage',
    
        data(){
          return{
            listData: [{
              'title': '新闻热点',
              'content': '据@新华视点 消息，外交部发言人华春莹31日就BBC驻华记者沙磊离任一事表示，沙磊离任前没有履行一个外国常驻记者离任前应该履行的手续，他是不辞而别。新疆一些民众和实体打算因沙磊制造涉疆假新闻起诉他，这完全是民间行为，是民众运用法律手段来维护自身荣誉和利益。如果沙磊认为他的报道是公正客观的，那就应该勇敢应诉。但是他跑什么？说明了什么问题？华春莹表示，BBC散布大量虚假信息，遭到中国人民强烈反对。BBC在国际议题上的造假行为，甚至到了BBC内部人都看不下去的地步'
            }, {
              'title': '无缝滚动第二行无缝滚动第二行',
              'content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'
            }, {
              'title': '无缝滚动第三行无缝滚动第三行',
              'content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'
            }, {
              'title': '无缝滚动第四行无缝滚动第四行',
              'content': '2枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯6'
            }, {
              'title': '无缝滚动第五行无缝滚动第五行',
              'content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'
            }, {
              'title': '无缝滚动第六行无缝滚动第六行',
              'content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'
            }, {
              'title': '无缝滚动第七行无缝滚动第七行',
              'content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'
            }, {
              'title': '无缝滚动第八行无缝滚动第八行',
              'content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'
            }, {
              'title': '无缝滚动第九行无缝滚动第九行',
              'content': '枯藤老树昏鸦，小桥流水人家。古道西风瘦马。夕阳西下，断肠人在天涯'
            }],
            animateUp: false,
            timer: null
          }
    
        },
        computed: {
          /*top () {
            return -this.activeIndex * 50 + 'px'
          }*/
        },
        created() {
          this.timer = setInterval(this.scrollAnimate, 1500);
        },
        methods:{
          scrollAnimate() {
            this.animateUp = true
            setTimeout(() => {
              this.listData.push(this.listData[0])
              this.listData.shift()
              this.animateUp = false
            }, 500)
          },
          stopFn(){
            clearInterval(this.timer)
          },
          startFn(){
            this.timer = setInterval(this.scrollAnimate, 1500);
          }
        },
        destroyed() {
          clearInterval(this.timer)
        }
      }
    </script>
    
    <style scoped lang="less">
        .message-page{
            border: 1px solid transparent;
            margin-top: 24px;
            width: 800px;
            height: 147px;
            background: #FFFFFF;
            border-radius: 4px;
            /**/
            .msg-tit{
                padding: 20px 16px 24px 16px;
                .msg-top{
                    display: flex;
                    justify-content: space-between;
                    .tit-word{
                        font-size: 16px;
                        color: #222222;
                    }
                    .tit-more{
                        color: #666666;
                        font-size: 12px;
                        text-decoration: underline;
                        &:hover{
                            cursor: pointer;
                        }
                    }
                }
                .msg-line{
                    width: 768px;
                    height: 1px;
                    background: #EFEFEF;
                    margin: 16px 0;
    
                }
                .marquee-wrap  {
                    /*width: 80%;*/
                    height: 48px;
    
                    margin: 0 auto;
                    overflow: hidden;
                    .marquee-list {
                        /*border: 1px solid red;*/
                        li {
                            width: 100%;
                            height: 100%;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                            list-style: none;
    
                            font-size: 18px;
                            font-weight: 400;
    
    
                            .p-tit{
                                font-size: 16px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                color: #222222;
                                height: 22px;
                                line-height: 22px;
                            }
                            .p-word{
                                margin-top: 8px;
                                font-size: 14px;
                                font-family: PingFangSC-Regular, PingFang SC;
                                color: #666666;
                                height: 18px;
                                line-height: 18px;
                                width: 767px;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                            }
    
                        }
                    }
                    .animate-up {
                        transition: all 0.5s ease-in-out;
                        transform: translateY(-48px);
                    }
                }
            }
    
    
        }
    </style>

[20210401114037365.gif_pic_center]: /images/20221022/368dc459236a478796cdbe5977aae000.png