1,安装依赖
npm install vue-seamless-scroll --save
2,main.js引入
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
3,页面中使用
<vue-seamless-scroll :data="listData" :class-option="classOption" class="vue-seamless-scroll">
<div class="rows" v-for="(item, index) in listData" :key="index">
<ul>
<li>
<span class="name">
巡视组名称:{{item.name}}
</span>
<span class="date">
巡视周期:{{item.date}}
</span>
<span class="date">
巡视时长:{{item.value}}
</span>
</li>
<li>
<span class="state">
巡视主题:{{item.title}}
</span>
</li>
</ul>
</div>
</vue-seamless-scroll>
// 监听属性 类似于data概念
computed: {
classOption() {
return {
step: 0.2, // 数值越大速度滚动越快
limitMoveNum: 2, // 开始无缝滚动的数据量 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)
}
}
},
css样式
.vue-seamless-scroll {
height: 2.2rem;
overflow: hidden;
.rows {
background: url('~@/assets/images/bk1.png') no-repeat;
background-size: 100% 100%;
margin: 0.1rem 0 0.1rem 0;
ul {
li {
display: flex;
justify-content: space-between;
line-height: 0.5rem;
font-size: 0.16rem;
padding: 0 0.1rem;
.isAppropriation {
color: #01c5e5;
}
.operation {
color: rgba(255, 255, 255, 0.6);
cursor: pointer;
}
}
li:first-child {
// background: linear-gradient(90deg, rgb(5, 110, 125) 0%, rgba(5, 110, 125, 0.2) 100%);
}
}
}
}
列表竖向滚动效果