直播系统搭建，vue 列表无缝实时滚动

直播系统搭建，vue 列表无缝实时滚动

1、安装vue-seamless-scroll

 

npm install vue-seamless-scroll --save　　

​

2.引入组件

 

 
import vueSeamlessScroll from 'vue-seamless-scroll'
 
components: {
        vueSeamlessScroll
},　

 

3.对vueSeamlessScroll进行配置

 

computed: {
        ...mapGetters(["$selectionIndustry"]),
        classOption() {
            return {
                step: 0.5, // 数值越大速度滚动越快
                limitMoveNum: 12, // 开始无缝滚动的数据量 this.dataList.length
                hoverStop: true, // 是否开启鼠标悬停stop
                direction: 1, // 0向下 1向上 2向左 3向右
                openWatch: true, // 开启数据实时监控刷新dom
                singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
                singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
                waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
            };
        },
    },

 

4.完整代码

不要忘记给contianer容器加overflow: hidden;

 

 <div class="contianer" >
            <vue-seamless-scroll :data="listData" :class-option="defaultOption" >
                <ul class="ul-scoll">
                    <li v-for="(item, index) in listData" :key='index'>
                        <span class="title">{{item.title}}：</span><span class="date">{{item.time}}</span>
                    </li>
                </ul>
            </vue-seamless-scroll>
</div>

 

以上就是 直播系统搭建，vue 列表无缝实时滚动，更多内容欢迎关注之后的文章