vue 数据可视化大屏 项目中要求列表可以自动滚动,当前使用的是vue2实现的效果,如果要使用vue3的话,可以通过vue3 使用vue3-seamless-scroll实现列表无缝滚动插件实现.
安装依赖
npm i vueSeamlessScroll --save
实现代码
<template>
<div class="jiudianlist">
<div class="jiudianlisthead">
<div class="item">游客消费排名</div>
<div class="item">省份名称</div>
<div class="item">游客消费结构占比</div>
<div class="item">同比增速排名</div>
</div>
<div class="jiudianlistbody">
<vue-seamless-scroll
:data="list"
:class-option="defaultOption"
class="paiming"
>
<div class="jiudianlistbodys" v-for="(item,index) in list" :key="index">
<div class="item1">{{ item.index }}</div>
<div class="item1">{{ item.address }}</div>
<div class="item1">{{ item.percent }}</div>
<div class="item1">{{ item.rank }}</div>
</div>
</vue-seamless-scroll>
</div>
</div>
</template>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import { interface_news } from '../../api/api/zixun'
export default {
name: 'jiudianlist',
components: { vueSeamlessScroll },
computed: {
defaultOption () {
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)
}
}
},
props: {
id: {
type: String,
default () {
return ''
}
}
},
data () {
return {
status: '',
list: [{
index: '01',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '02',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '03',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '04',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '05',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '06',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '07',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '08',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '09',
address: '上海市',
percent: '23.19%',
rank: '2'
}, {
index: '10',
address: '上海市',
percent: '23.19%',
rank: '2'
}]
}
},
watch: {},
mounted () {
// this.getInfo()
},
methods: {
getInfo () {
interface_news({
key: '4cddbf1a',
action: 'get_news'
}).then((res) => {
this.list = res.data.map((item) => {
let robj = {}
robj['news_title'] = item.news_title
robj['auth_principal_name'] = item.auth_principal_name
robj['material_update_time'] = item.material_update_time.slice(0, 10)
return robj
})
})
}
}
}
</script>
<style lang="scss" scoped>
.jiudianlist {
width: calc(100% - 40px);
margin-left: 20px;
margin-right: 20px;
position: relative;
height: calc(100% - 20px);
}
.jiudianlisthead {
width: 100%;
height: 42px;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
background: rgba(14, 25, 121, 0);
.item {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: flex-start;
text-indent: 10px;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
flex: 1;
}
.item:nth-child(3) {
flex: 2;
}
}
.jiudianlistbody {
position: relative;
width: 100%;
height: calc(100% - 50px);
}
.jiudianlistbodys {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 42px;
background: rgba(14, 25, 121, 0);
.item1 {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: flex-start;
text-indent: 10px;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
flex: 1;
span {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: bold;
color: #FFD83C;
}
}
.item1:nth-child(3) {
flex: 2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.item1:nth-child(2) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
.jiudianlistbodys:nth-child(2n+1) {
background: rgba(0, 132, 255, 0.3);
}
.paiming {
width: 100%;
position: relative;
height: 100%;
overflow: hidden;
}
</style>