当前位置:首页 > vue.js > 正文内容

vue 公告滑动效果

tigon3年前 (2021-02-23)vue.js1674


适应只显示一条

<div class="marquee_box">
    <ul class="marquee_list" :class="{marquee_top:animate}">
        <li v-for="(item, index) in marqueeList" 
        @mouseenter="mouseenter"
        @mouseleave="mouseleave">
            <div class="avatar-box">
                <img src="" alt="">
            </div>
            <div class="marquee-content">
                <span>{{item.name}}</span>
                <span>为你助力</span>
                <span> {{item.amount}}</span>
            </div>
        </li>
    </ul>
    </div>

data() {
            return {
                show: true,
                animate: false,
                timer:null,
                marqueeList: [
                    {
                        name: 'XXX',
                        amount: '0.01元'
                    },
                    {
                        name: 'XXX',
                        amount: '20元'
                    },
                ]
            };
        },
        created(){
            this.timer=setInterval(this.showMarquee, 2000)
        },
        methods: {
            close() {
                this.show = false;
            },
            mouseenter() {
                console.log('1111')
                clearInterval(this.timer)
            },
            mouseleave(){
                this.timer=setInterval(this.showMarquee, 2000)
            },
            showMarquee() {
                this.animate = true;
                setTimeout(()=>{
                    this.marqueeList.push(this.marqueeList[0]);
                    this.marqueeList.shift();
                    this.animate = false;
                },500)
            },
        },

样式
.marquee_box{
    display: block;
    position: relative;
    width: 252px;
    margin:0 auto;
    height: 30px;
    overflow: hidden;
    .marquee {
        width: 100%;
        height: 50px;
        align-items: center;
        color: #3A3A3A;
        background-color: #b3effe;
        display: flex;
        box-sizing: border-box;
    }

    .marquee_title {
        padding: 0 20px;
        height: 30px;
        font-size: 14px;
        border-right: 1px solid #d8d8d8;
        align-items: center;
    }

    .marquee_box {
        display: block;
        position: relative;
        width: 60%;
        height: 30px;
        overflow: hidden;
    }

    .marquee_list {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
    }
    .marquee_top {
        transition: all 0.5s;
        margin-top: -40px
    }

    .marquee_list li {
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        margin-bottom:10px;
        display: flex;
        .avatar-box{
            width:40px;
            img{
                display: inline-block;
                width:30px;
                height:30px;
                border-radius: 50%;
                background-color: #CCC;
            }
        }
        .marquee-content{
            flex:1;
        }
    }

    .marquee_list li span {
        padding: 0 2px;
    }
}

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://www.webge.net/?id=110

“vue 公告滑动效果” 的相关文章

vue-router 路由几种模式,分别什么用法

vue-router 默认 hash 模式 .  http://music.163.com/#/friend还有一种是history模式。  http://music.163.com/friendhash模式背后的原理是onhashchange事件,...

vuex刷新状态消失的解决办法

vuex做数据管理非常好,但是唯一美中不足的地方,就是当页面刷新的时候状态保存不下来,但是工作业务中,常常会遇到,可能需要把状态保留下来的情况那在这种情况下可以使用方案:在 app.vue中的created函数中写如下代码:localstorage和sessionStorage都可以//在页面加载时...

vue3

vue3

安装vite?-Vite是vue作者开发的一款意图取代webpack的工具,其实原理是利用ES6的import会发送请求加载文件的特性,拦截这些请求,做一些预编译,省去webapck沉长的打包时间安装:npm install -D create-vite-app利用vite创建 vue3项目cre...

watch监听的几种写法

var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a...

vue3 新属性使用

vue3 新属性使用

setUp(){} //可以把所有数据和方法都放这里面一起导出,这个是在实现挂载之前就会执行的 ref基本的数据类型 reactive可以把数组,对象转成响应式 readonly处理之后的数据不能进行修改 toRefs可以把响应对象的某个解构出来的值变成响应式,如果原数据没有key,那就会...