Vue3.2——vue-seamless-scroll的使用

最新推荐文章于 2024-07-23 15:45:06 发布

studystudy。。

最新推荐文章于 2024-07-23 15:45:06 发布

阅读量870

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_43551242/article/details/126707073

版权



## 1.安装
npm install vue-seamless-scroll --save

## 2.完整实例代码
<div class="scroll_box">
            <button>无缝滚动</button>
            <vue-seamless-scroll
                :data="tableData"
                :class-option="optionSingleHeight"
                class="seamless-warp"
            >
                <el-table
                    class="table_wrap"
                    :data="tableData"
                    border
                    style="width: 100%"
                >
                    <el-table-column
                        prop="date"
                        label="Date"
                        width="180"
                    />
                    <el-table-column
                        prop="name"
                        label="Name"
                        width="180"
                    />
                    <el-table-column
                        prop="title"
                        label="Title"
                    />
                </el-table>
            </vue-seamless-scroll>
        </div>
import vueSeamlessScroll from "vue-seamless-scroll/src";

const optionSingleHeight = computed(() => {
    return {
        step: 0.2, // 数值越大速度滚动越快
        // limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
        // hoverStop: true, // 是否开启鼠标悬停stop
        // direction: 1, // 0向下 1向上 2向左 3向右
        // openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 26, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        // waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
    };
});
const tableData = [
    {
        date: "2016-05-03",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-03",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-03",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-03",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-02",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-04",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
    {
        date: "2016-05-01",
        name: "Tom",
        title: "No. 189, Grove St, Los Angeles",
    },
];




.seamless-warp {
    height: 229px;
    overflow: hidden;
}