1.滚动效果
2.代码
<div class="page-container" style="">
<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>
<script>
// 引入vue-seamless-scroll组件
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
name: 'Demo',
components:{
vueSeamlessScroll
}
data(){
return {
defaultOption: {
step: 1, // 数值越大速度滚动越快
limitMoveNum: 0, // 开始无缝滚动的数据量 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)
},
listData: [],
}
},
mounted(){
for (let i = 0; i < 3; i++) {
let j = {
title: "无缝滚动序号index：" + i,
time: this.$moment(new Date()).format('YYYY-MM-DD HH:mm'),
};
this.listData.push(j);
}
const len = this.listData.length;
// 这里的目的是为了判断数组的长度是否超出了容器高度，如果超出了则进行无缝滚动，反之就不滚动。
this.defaultOption.limitMoveNum = (len) * 40 > 200 ? len: len+1;
console.log(this.defaultOption.limitMoveNum,len,'::>>>>>0000')
},
methods:{}
}
</script>
<style lang="less">
.page-container {
width: 400px;
height: 200px;
overflow: hidden;
border: 1px solid #283dff;
.ul-scoll {
li {
height: 40px;
line-height: 40px;
background: rgba(198, 142, 226, 0.4);
}
}
}
</style>
3.使用方法
使用npm安装：
npm install vue-seamless-scroll --save
使用yarn安装：
yarn add vue-seamless-scroll
使用：
注册组件：
//全局注册 main.js文件
import vueSeamlessScroll from 'vue-seamless-scroll';
vue.use(vueSeamlessScroll);
<script>
//单个文件局部注册
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
components:{
vueSeamlessScroll
},
data(){
return{
listData: [
{"title": "无缝滚动了","time": new Date()},
{"title": "无缝滚动了","time": new Date()}
],
classOption: {},
}
},
methods:{
}
}
</script>
<template>
<vue-seamless-scroll :data="listData" class="wrap" :class-option="classOption">
<ul class="item">
<li v-for="(item, index) in listData" :key="index">
<span class="item.title">{{item.title}}</span>
<span class="item.time">{{item.time}}</span>
</li>
</ul>
</vue-seamless-scroll>
</template>
<style lang="less" scoped>
.wrap{
height: 270px;
width: 400px;
margin: 0 auto;
overflow: hidden;
li{
list-style: none;
padding:0;
margin: 0;
height: 40px;
line-height: 40px;
font-size: 16px;
display: flex;
justify-content: space-between;
}
}
</style>
4.组件配置
listData数据： 无缝滚动list数据。
组件内部只关注listdata数组的length。
classOption:{
step: 1,// 数值越大滚动速度越快，step值不建议太小，不然会有卡顿效果
limitMoveNum:5,//开启无缝滚动的数据量
hoverStop: true, //是否启用鼠标hover控制
direction: 1, //方向 0往下 1往上 2向左 3向右
openTouch: true, // 移动端开启touch滑动
singleHeight: 0, //单步运动停止的高度（默认值0是无缝不停止的滚动），direction为0/1生效
singleWidth: 0,//单步运动停止的宽度， direction为2/3生效
waitTime: 1000, //单步停止等待时间
switchOffset: 30, //左右切换按钮距离左右边界的边距px
autoPlay: true, // 需要实现手动切换左右滚动的时候，必须设置autoPlay: false
}
回调事件：
@ScrollEnd="handleScrollEnd"
methods:{
handleScrollEnd(){
console.log()
}
}
注意点：
1.最外层容器需要手动设置 width, height, overflow:hidden;
2.左右的无缝滚动需要给主内容区域（即默认slot插槽提供）设定合适的css width 属性，也可设置display:flex等
3.step值不建议太小，不然会出现卡顿效果
4.需要实现手动切换左右滚动的时候，必须设置 autoPlay: false.
复杂结构数组属性更新问题：
vue-seamless-scroll组件中的list数据length无变化，仅仅是属性变更，手动调用组件内部的 reset方法即可。
eg: this.$refs.seamlessScroll.reset();
参考链接：
官网文档地址：https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/
标签：vue,滚动,seamless,height,scroll,无缝 From： https://www.cnblogs.com/sunnyeve/p/17120230.html