vue 自定义marquee横向无缝滚动组件

最新推荐文章于 2024-08-09 07:05:07 发布

Lofan.

最新推荐文章于 2024-08-09 07:05:07 发布

阅读量4.6k

点赞数 1

分类专栏： Vue 专栏文章标签： vue横向无缝滚动 vue公告横向无缝滚动

Vue 专栏专栏收录该内容

7 篇文章 0 订阅

订阅专栏

先上效果图：

（1）看起来可能有点卡顿，但是实际上页面上看起来挺顺畅的。

（2）思路就是获取每一个列表的宽度，设置定时器移动列表，当移动的距离达到一个列表的宽度的时候，把这个距离放到数组的最后。这样就能达成无缝循环滚动了。

大致的情况就是下面这样：
实现思路

接下来就是代码的实现：

index.vue 引入组件

<template>
    <div>
        <marqueeLeft :send-val='send'></marqueeLeft >
    </div>
</template>
<script>
    import marqueeLeft from '../components/marquee'
    export default {
        data:function(){
            return{
                send:[{place: "来自东莞市的", name: "黄女士"},
            {place: "来自太原市的", name: "吴先生"},
            {place: "来自常州市的", name: "戚先生"},
            {place: "来自金华市的", name: "尤先生"},
            {place: "来自贵阳市的", name: "陈女士"},
            {place: "来自长春市的", name: "魏女士"},
            {place: "来自泉州市的", name: "褚先生"},
            {place: "来自南昌市的", name: "蒋女士"},
            {place: "来自南京市的", name: "沈先生"},
            {place: "来自天津市的", name: "韩先生"},
            {place: "来自宁波市的", name: "邹女士"},
            {place: "来自嘉兴市的", name: "周女士"},
            {place: "来自长沙市的", name: "秦先生"},
            {place: "来自济南市的", name: "孙女士"},
            {place: "来自杭州市的", name: "杨先生"}]
            }
        },
        components:{ marqueeLeft },
    }
</script>

marquee.vue 组件页面

<template>
    <div class="my-outbox">
        <div class="my-inbox" ref='box'>
            <div class="my-list" v-for="(item,index) in sendVal" :key='index' ref='list'>
                {{item.place}}<span class="my-uname">{{item.name}}</span>刚刚购买了产品
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:'my-marquee-left',
        props:{        
            sendVal:Array
        },
        data() {
            return {
                nowTime:null,//定时器标识
                disArr:[],//每一个内容的宽度
            }
        }, 
        mounted:function(){
            var that = this;
            var item = this.$refs.list; 
            var len = this.sendVal.length;
            var arr = [];
            var margin = this.getMargin(item[0]) //因为设置的margin值一样，所以取第一个就行。
            for(var i = 0;i < len;i++){
                arr.push(item[i].clientWidth + margin)//把宽度和 margin 加起来就是每一个元素需要移动的距离
            }
            this.disArr = arr;
            this.moveLeft();
        },
        beforeDestroy:function(){
            clearInterval(this.nowTime);//页面关闭清除定时器
            this.nowTime = null;//清除定时器标识
        },
        methods:{
            //获取margin属性
            getMargin:function(obj){
                var marg = window.getComputedStyle(obj,null)['margin-right'];
                marg = marg.replace('px','')
                return Number(marg) //强制转化成数字
            },
            //移动的方法
            moveLeft:function(){
                var outbox = this.$refs.box;
                var that=this;
                var startDis = 0;//初始位置
                this.nowTime = setInterval(function(){
                    startDis -= 0.5;
                    if(Math.abs(startDis) > Math.abs(that.disArr[0])){
                        that.disArr.push(that.disArr.shift())//每次移动完一个元素的距离，就把这个元素的宽度
                        that.sendVal.push(that.sendVal.shift())//每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
                        startDis = 0;
                    }
                    outbox.style = 'transform: translateX('+ startDis +'px)'; //每次都让盒子移动指定的距离
                },1000/60)
            }
        }
    }
</script>

<style lang="less" scoped>
    .my-outbox{
        color: #D7BC8D;
        overflow: hidden;
        height: 35px;
        background: #422b02;
        .my-inbox{
            white-space: nowrap;
            .my-list{
                margin-right: 25px;
                display: inline-block;
                font-size: 13px;
                height: 35px;
                line-height: 35px;
                .my-uname{
                    color: #FF8900;
                }
            }
        }
    }
</style>