1、npm 安装
npm install vue-seamless-scroll --save
2、引入插件
在项目main.js中引入与使用
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
3、html代码
<vue-seamless-scroll :data="newsList" :class-option="optionLeft" class="seamless-warp2">
<ul class="item">
<li v-for="(item,id) in newsList" v-text="item.title" :key="id"></li>
</ul>
</vue-seamless-scroll>
4、data中存数据
export default {
data() {
return {
newsList: [
{
title: "单步运动停止的高度"
},
{
title: "单步运动停止的高度单步运动停止的高度"
}
]
};
},
5、JS代码 (创建计算属性钩子函数)
computed: {
optionLeft() {
return {
direction: 2,
limitMoveNum: 2
// 以下是自选属性
// step: 0.2, // 数值越大速度滚动越快
// limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
// hoverStop: true, // 是否开启鼠标悬停stop
// direction: 0, // 0向下 1向上 2向左 3向右
// openWatch: true, // 开启数据实时监控刷新dom
// singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
// singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
// waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
};
}
}
6、css样式代码
<style lang="scss" scoped>
.seamless-warp2 {
overflow: hidden;
height: 45px;
width: 380px;
ul.item {
width: 280px;
li {
float: left;
margin-right: 10px;
}
}
}
</style>
6、效果图