Install the plugin:
npm install vue-seamless-scroll --save
Introduced in main.js:
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
The page uses:
<template>
<div class="roll-list">
<div class="roll-list-text">{
{ titleText }}</div>
<ul class="ul-scoll">
<li class="header-li">
<div v-for="(item,index) in headerLi" :key="index">{
{ item }}</div>
</li>
<vue-seamless-scroll :data="tableList" :class-option="defaultOption" class="ul-scoll-list">
<div class="list-row">
<li v-for="(item,index) in tableList" :key="index" >
<div :class="[index === 0 ? 'active-red' : '',index === 1 ? 'active-yellow' : '',index === 2 ? 'active-green' : '']">{
{index+1}}</div>
<div>{
{item.name}}</div>
<div>{
{item.date}}</div>
</li>
</div>
</vue-seamless-scroll>
</ul>
</div>
</template>
<style lang="scss" scoped>
// 滚动列表样式
.roll-list{
.roll-list-text{
font-size: 1.4vh;
font-weight: bold;
}
.ul-scoll{
list-style: none;
padding: 0;
margin: 10px 0 0 0;
.header-li{
font-weight: bold;
}
.ul-scoll-list{
height: 65px;
overflow: hidden;
.list-row{
.active-red{
color: #FF3A30;
}
.active-yellow{
color: #FF9502;
}
.active-green{
color: #00BB7A;
}
li:nth-child(even){
background-color: #eee;
}
}
}
.header-li, .list-row>li{
display: flex;
flex-direction: row;
font-size: 1.5vh;
padding: 2px 0;
text-align: center;
div:nth-child(1){
width: 60px;
}
div:nth-child(2){
width: 100px;
}
div:nth-child(3){
width: 19vw;
}
}
}
}
</style>
Configuration:
<script>
export default {
data() {
return {
titleText: '测试标题', // 滚动列表的标题
headerLi: ['字段1','字段2','字段3'], // 滚动列表的表头
tableList: [
{name: '阿迪是',date: '啊啊啊啊啊啊啊啊'},
{name: '阿迪是',date: '少时诵诗书'},
{name: '阿迪是',date: '的点点滴滴'},
{name: '阿迪是',date: '灌灌灌灌灌'},
{name: '阿迪是',date: '哈哈哈哈'},
{name: '阿迪是',date: '急急急急急急'},
], // 滚动列表的内容
defaultOption: {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum: 1, // 开始无缝滚动的数据量 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)
}
}
},
// 如果是以组件方式使用,请注释data里边的字段,并配置 props 以下字段
/*props: {
titleText: {
type: String,
default: ''
},
headerLi: {
type: Array,
default: () => {
return []
}
},
tableList: {
type: Array,
default: () => {
return []
}
}
},*/
created() {
},
methods: {
},
}
</script>
That's it! ! !
The test works! ! ! Thanks for the support! ! !