vue实现列表垂直无缝滚动


Posted in Vue.js onApril 08, 2022

本文实例为大家分享了vue实现列表垂直无缝滚动的具体代码,供大家参考,具体内容如下

实现新闻列表的轮播(如下图)

vue实现列表垂直无缝滚动

上代码

封装的so-marquee.vue

<template>
    <div
        class="marquee-wrapper"
        :style="{ width: realWidth + 'px' }"
    >
        <div
            class="marquee-container"
            :style="{ height: realHeight + 'px' }"
            :class="className"
        >
            <ul
                ref="marqueeCon"
                :id="tooltipId"
                class="marquee-content"
                :class="{ anim: animate === true}"
                @mouseenter="handleStop()"
                @mouseleave="handleUp()"
            >
                <li
                    v-for="(item,index) in realData"
                    :key="`${tooltipId}-${item.id}-${index}`"
                    class="marquee-item"
                    :style="{ height: itemHeigth + 'px' }"
                    @click="handleClick(item)"
                >
                    <slot name="itemCon" :item="item"></slot>
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
import { parseToNum, generateId } from '@/utils/util'

export default {
    name: "so-marquee",
    props: {
        /*
        * 可接受传参
        * data          列表数据
        * className     自定义类名
        * width         列表宽度,默认值:400
        * height        列表高度,默认值:200
        * showNumber    可视的条目数,默认值:5
        * speed         轮播速度,默认值:1000
        * */
        //列表数据
        data: {
            type: Array,
            default: () => [],
        },
        //自定义类名
        className: String,
        //列表宽度,默认值:400
        width: {
            type: [Number, String],
            default: 400
        },
        //列表高度,默认值:200
        height: {
            type: [Number, String],
            default: 200
        },
        //可视的条目数,默认值:5
        showNumber: {
            type: [Number, String],
            default: 5
        },
        //轮播速度,默认值:1000
        speed: {
            type: [Number, String],
            default: 1000
        }
    },
    data() {
        return {
            intnum: undefined,
            animate: false
        };
    },
    computed: {
        tooltipId() {
            return `marquee-con-${ generateId() }`;
        },
        realWidth() {
            return parseToNum(this.width)
        },
        realHeight() {
            return parseToNum(this.height)
        },
        realShowNumber() {
            return parseToNum(this.showNumber)
        },
        realSpeed() {
            return parseToNum(this.speed) < 1000 ? 1000 : parseToNum(this.speed)
        },
        itemHeigth() {
            return this.realHeight / this.realShowNumber
        },
        realData() {
            return JSON.parse(JSON.stringify(this.data))
        }
    },
    mounted() {
        if (this.realData.length > this.realShowNumber) {
            this.scrollUp();
        }
    },
    methods: {
        scrollUp() {
            // eslint-disable-next-line no-unused-vars
            this.intnum = setInterval(_ => {
                this.animate = true;
                setTimeout(() => {
                    this.realData.push(this.realData[0]);   // 将数组的第一个元素添加到数组的
                    this.realData.shift();               //删除数组的第一个元素
                    this.animate = false;           // margin-top 为0 的时候取消过渡动画,实现无缝滚动
                }, this.realSpeed / 2)
                this.$once('hook:beforeDestroy', () => {
                    this.cleanup()
                })
            }, this.realSpeed);
        },
        handleStop() {
            this.cleanup()
        },
        handleUp() {
            this.scrollUp();
        },
        handleClick(row) {
            this.$emit('handleClick', row)
        },
        cleanup() {
            if (this.intnum) {
                clearInterval(this.intnum);
                this.intnum = null;
            }
        }
    },
    beforeDestroy() {
        this.cleanup();
    },
    deactivated() {
        this.cleanup();
    },
    watch: {
        animate(flag) {
            this.marqueeCon = this.$refs.marqueeCon
            if (flag) {
                this.marqueeCon.style.marginTop = `-${ this.itemHeigth }px`
            } else {
                this.marqueeCon.style.marginTop = 0
            }
        },
    }
};
</script>
<style scoped lang="scss">
    .marquee-container {
        overflow: hidden;
    }

    .marquee-content {
        position: relative;
    }

    .anim {
        transition: all 0.5s;
    }

    .marquee-item {
        display: flex;
        align-items: center;
        justify-content: space-around;
    }
</style>

parseToNum方法

export function parseToNum(value) {
    if (value !== undefined) {
        value = parseInt(value, 10)
        if (isNaN(value)) {
            value = null;
        }
    }
    return value
}

generateId 方法

export const generateId = function() {
    return Math.floor(Math.random() * 10000);
};

父组件调用

<template>
    <div id="app">
        <so-marquee
            :data="jsonData"
            :height="200"
            :showNumber="4"
            :speed="500"
            class="my-ui-marquee"
            @handleClick="handleMarqueeClick"
        >
            <template v-slot:itemCon="{item}">
                <div>{{ item.id }}</div>
                <div>{{ item.name }}</div>
                <div>{{ item.date }}</div>
            </template>
        </so-marquee>
    </div>
</template>

<script>
import soMarquee from './components/so-marquee'

export default {
    name: 'App',
    data() {
        return {
            jsonData: [
                {
                    id: 1,
                    name: "开会通知",
                    date: "2020-02-01"
                },
                {
                    id: 2,
                    name: "放假通知",
                    date: "2020-02-02"
                },
                {
                    id: 3,
                    name: "停水通知",
                    date: "2020-02-03"
                },
                {
                    id: 4,
                    name: "停电通知",
                    date: "2020-02-04"
                },
                {
                    id: 5,
                    name: "停车通知",
                    date: "2020-02-05"
                },
                {
                    id: 6,
                    name: "奖励通知",
                    date: "2020-02-06"
                },
                {
                    id: 7,
                    name: "处分通知",
                    date: "2020-02-07"
                },
                {
                    id: 8,
                    name: "处分8通知",
                    date: "2020-02-08"
                },
                {
                    id: 9,
                    name: "处分9通知",
                    date: "2020-02-09"
                },
                {
                    id: 10,
                    name: "处分10通知",
                    date: "2020-02-10"
                },
            ]
        }
    },
    components: {
        soMarquee
    },
    methods: {
        handleMarqueeClick(row) {
            alert(`当前点击的第${row.id}行`)
        }
    }
}
</script>

<style scoped lang="scss">
.my-ui-marquee {
    ::v-deep.marquee-item {
        cursor: pointer;
    }
}
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Vue.js 相关文章推荐
vue实现图片裁剪后上传
Dec 16 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue使用过滤器格式化日期
Jan 20 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
Vue中避免滥用this去读取data中数据
Mar 02 Vue.js
vue前端工程的搭建
Mar 31 Vue.js
vue实现同时设置多个倒计时
May 20 Vue.js
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
vue选项卡切换的实现案例
Apr 11 Vue.js
vue项目打包后路由错误的解决方法
Apr 13 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
vue 给数组添加新对象并赋值
Apr 20 Vue.js
vue3引入highlight.js进行代码高亮的方法实例
vue中的可拖拽宽度div的实现示例
vue 实现弹窗关闭后刷新效果
Apr 08 #Vue.js
vue中this.$http.post()跨域和请求参数丢失的解决
Apr 08 #Vue.js
vue实现书本翻页动画效果实例详解
Apr 08 #Vue.js
vue实现列表拖拽排序的示例代码
vue实现可以快进后退的跑马灯组件
Apr 08 #Vue.js
You might like
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
php Calender(日历)代码分享
2014/01/03 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
功能强大的PHP POST提交数据类
2016/07/15 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript使用activex控件的代码
2011/01/27 Javascript
javascript算法学习(直接插入排序)
2011/04/12 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
iframe跨域通信封装详解
2015/08/11 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
实例讲解jquery中mouseleave和mouseout的区别
2016/02/17 Javascript
浅谈JS正则表达式的RegExp对象和括号的使用
2016/07/28 Javascript
jquery 判断div show的状态实例
2016/12/03 Javascript
JavaScript拖动层Div代码
2017/03/01 Javascript
JS实现的随机排序功能算法示例
2017/06/09 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
如何从零开始利用js手写一个Promise库详解
2018/04/19 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
vue缓存的keepalive页面刷新数据的方法
2019/04/23 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
python打包生成的exe文件运行时提示缺少模块的解决方法
2018/10/31 Python
pycharm新建一个python工程步骤
2019/07/16 Python
python config文件的读写操作示例
2019/09/27 Python
利用Python产生加密表和解密表的实现方法
2019/10/15 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
goodhealth官方海外旗舰店:新西兰国民营养师
2017/12/15 全球购物
学期自我评价
2014/01/27 职场文书
实习协议书
2015/01/27 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
Python类方法总结讲解
2021/07/26 Python