vue大屏开发列表无缝滚动vue-seamless-scroll

使用插件 vue-seamless-scroll

官网地址：vue-seamless-scroll的简介及使用教程 - Made with Vuejs

安装：

npm install vue-seamless-scroll --save

全局注册：

import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

使用：

在所需页面引用

import vueSeamlessScroll from 'vue-seamless-scroll'

<vue-seamless-scroll class="scroll_table" :data="tableHistoryData" :class-option="classOption" :scroll="isScrolling">
                        <div v-for="(v, i) in tableHistoryData" :class="v.errorType == 1 ? 'even_number' : '_'"
                            @click="vulcanizationModel(v)"> <!--   -->
                            <span>{{ i + 1 }}</span>
                            <span><img v-if="v.errorType == 0 && v.errorMsg"
                                    src="../../assets/productOverTime_right.png" alt=""
                                    style="margin-right: 6px;margin-top: -2px;"><img
                                    v-if="v.errorType == 1 && v.errorMsg" src="../../assets/changeOverTime_right.png"
                                    alt="" style="margin-right: 6px;margin-top: -2px;;">{{ v.errorMsg }}</span>
                            <span>{{ v.createTime }}</span>
                        </div>
                    </vue-seamless-scroll>





data() {
        // let D = new Date().getTime();
        return {
isScrolling: true,//判断是否滚动
classOption: {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                // singleHeight: 43, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                // singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 2000
            }
}
}

methods: {
        //需要点击列表停止滚动
            vulcanizationModel() {
            this.classOption.step=0 //停止滚动，step=0
        },
        
          // 继续滚动
        closeModal() {
            this.classOption.step=0.4 //继续滚动滚动，step=0
        },

}


css：
.scroll_table {
                    width: 100%;
                    height: 752px;
                    // overflow-y: auto;
                    // list-style: none;
                    overflow: hidden;
                    margin: 0 auto;

                    div {
                        width: 98%;
                        height: 130px;
                        display: flex;
                        align-items: center;
                        // background: #042353;
                        font-weight: 500;
                        color: #FFFFFF;
                        font-size: 22px;
                        font-weight: 700;
                        border-radius: 10px;
                        background-color: #A16F12;
                        list-style: none;
                        padding: 0;
                        margin: 0 auto;
                        margin-top: 20px;

                        span {
                            display: block;
                            float: left;
                        }

                        span:first-child {
                            width: 100px;
                            text-align: center;
                        }

                        span:nth-child(2) {
                            width: 630px;
                            text-align: center;
                        }

                        span:nth-child(3) {
                            width: 325px;
                            text-align: center;
                        }
                    }

                    .even_number {
                        width: 98%;
                        height: 130px;
                        display: flex;
                        align-items: center;
                        // background: #042353;
                        font-weight: 500;
                        color: #FFFFFF;
                        font-size: 22px;
                        font-weight: 700;
                        border-radius: 10px;
                        background-color: #92142F;
                        list-style: none;
                        padding: 0;
                        margin: 0 auto;
                        margin-top: 20px;

                        span {
                            display: block;
                            float: left;
                        }

                        span:first-child {
                            width: 100px;
                            text-align: center;
                        }

                        span:nth-child(2) {
                            width: 630px;
                            text-align: center;
                        }

                        span:nth-child(3) {
                            width: 325px;
                            text-align: center;
                        }
                    }
                }

还找到另外一种方法：

<vue-seamless-scroll class="scroll_table" :data="tableHistoryData" :class-option="classOption" :scroll="isScrolling" ref="scroll">

• 绑定一个ref,
• 通过this.$refs.scroll._cancle()方法停止滚动
• 通过 this.$refs.scroll._startMove()方法再次启动

这个我尝试了，没弄出来(●ˇ∀ˇ●)，就直接把step设为0停止滚动，step>0继续滚动

补充：

通过开关控制是否滚动，暂停滚动时有滚动条，可用滚轮划动

主要通过css来实现

 <a-switch checked-children="滚动" un-checked-children="暂停" v-model="isScrolling" default-checked @change="suspendChange" />

<vue-seamless-scroll :class="isScrolling?'scroll_table':'history_table'" :data="tableHistoryData" :class-option="classOption" :scroll="isScrolling">

        suspendChange(checked) {

            this.isScrolling = checked;

            // console.log(this.isScrolling,checked,"---------------checked")

            if(this.isScrolling==true){

                this.classOption.step=0.5

            }else{

                this.classOption.step=0

            }

        },

 .scroll_table {
                    width: 100%;
                    height: 752px;
                    // overflow-y: auto;
                    // list-style: none;
                    overflow: hidden;
                    margin: 0 auto;

                    div {
                        width: 98%;
                        height: 130px;
                        display: flex;
                        align-items: center;
                        // background: #042353;
                        font-weight: 500;
                        color: #FFFFFF;
                        font-size: 22px;
                        font-weight: 700;
                        border-radius: 10px;
                        background-color: #A16F12;
                        list-style: none;
                        padding: 0;
                        margin: 0 auto;
                        margin-top: 20px;

                        span {
                            display: block;
                            float: left;
                        }

                        span:first-child {
                            width: 100px;
                            text-align: center;
                        }

                        span:nth-child(2) {
                            width: 630px;
                            text-align: center;
                        }

                        span:nth-child(3) {
                            width: 325px;
                            text-align: center;
                        }
                    }

                    .even_number {
                        width: 98%;
                        height: 130px;
                        display: flex;
                        align-items: center;
                        // background: #042353;
                        font-weight: 500;
                        color: #FFFFFF;
                        font-size: 22px;
                        font-weight: 700;
                        border-radius: 10px;
                        background-color: #92142F;
                        list-style: none;
                        padding: 0;
                        margin: 0 auto;
                        margin-top: 20px;

                        span {
                            display: block;
                            float: left;
                        }

                        span:first-child {
                            width: 100px;
                            text-align: center;
                        }

                        span:nth-child(2) {
                            width: 630px;
                            text-align: center;
                        }

                        span:nth-child(3) {
                            width: 325px;
                            text-align: center;
                        }
                    }
                }

                .history_table {
                    width: 1060px;
                    height: 752px;
                    overflow-y: auto;

                    div {
                        width: 100%;
                        height: 130px;
                        display: flex;
                        align-items: center;
                        // background: #042353;
                        font-weight: 500;
                        color: #FFFFFF;
                        font-size: 22px;
                        font-weight: 700;
                        margin-top: 20px;
                        border-radius: 10px;
                        background-color: #A16F12;

                        span {
                            display: block;
                            float: left;
                        }

                        span:first-child {
                            width: 100px;
                            text-align: center;
                        }

                        span:nth-child(2) {
                            width: 630px;
                            text-align: center;
                        }

                        span:nth-child(3) {
                            width: 325px;
                            text-align: center;
                        }
                    }

                    .even_number {
                        background-color: #92142F
                    }
                }

                /*滚动条样式*/
                .history_table::-webkit-scrollbar {
                    width: 4px;
                    height: 4px;
                    background: #102643;
                }

                .history_table::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 2px;
                    -webkit-box-shadow: inset 0 0 5px #ccc;
                    background: #102643;
                }

                .history_table::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    -webkit-box-shadow: inset 0 0 5px #ccc;
                    border-radius: 0;
                    background: #ccc;
                }
            }