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

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

1、安装vue-seamless-scroll

 

1	<br>npm install vue-seamless-scroll --save

​

2.引入组件

 

1	<br> <br>import vueSeamlessScroll from 'vue-seamless-scroll'<br> <br>components: {<br>        vueSeamlessScroll<br>},

 

3.对vueSeamlessScroll进行配置

 

1

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

 

4.完整代码

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

 

1

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

 

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