目录

vue-seamless-scroll无缝滚动的实现vue-seamless-scroll官网

vue-seamless-scroll无缝滚动的实现

需求：向上无缝滚动

配置

computed: {classOption() {return {step: 0.3, //数值越大速度滚动越快limitMoveNum: 5, //开始无缝滚动的数据量 //this.fourDatata.lengthhoverStop: true, //是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, //开启数据实时监控刷新domsingleHeight: 0, //单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, //单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000 //单步运动停止的时间(默认值1000ms)};},},

<template><div class="wrapper"><div class="content"><div class="border"><span>团队排行榜</span></div><div class="title"><div class="title_header clear_fix"><div v-for="item in title" class="title_header_item" :key="item">{{item }}</div></div><div class="title_con"><vueSeamless:data="data":class-option="classOption"class="seamless-warp2"@ScrollEnd="onScrollEnd"><divclass="title_con_item clear_fix":class="idx % 2 === 1 ? 'odd' : 'even'"v-for="(item, idx) in data":key="item.trrm"><span>{{item.term }}</span><span>{{item.balance }}</span><span>{{item.achievementRate }}</span><span>{{item.active }}</span></div></vueSeamless></div></div></div><div class="mock" v-if="isLoding"><Loadingtab /></div></div></template><script>import vueSeamless from "vue-seamless-scroll";import Loadingtab from "@/components/commom/Loadingtab";export default {components: {vueSeamless,Loadingtab,},data() {return {title: ["团队", "余额(亿)", "预算达成率", "单月活跃小B"],data: [{term: "湖南分部",balance: "4.01",achievementRate: "170.7%",active: "1",},{term: "广东分部",balance: "24.38",achievementRate: "138.9%",active: "2",},{term: "微贷团队",balance: "124.38",achievementRate: "8.9%",active: "3",},{term: "华东分部",balance: "48.01",achievementRate: "70.7%",active: "4",},{term: "深圳分部",balance: "66.38",achievementRate: "1.9%",active: "5",},{term: "湖北分部",balance: "6.01",achievementRate: "20.7%",active: "6",},{term: "西南分部",balance: "0.19",achievementRate: "27.54%",active: "7",},{term: "华北分部",balance: "0.25",achievementRate: "14.44%",active: "8",},],isLoding: true,};},created() {this.onScrollEnd();},computed: {classOption() {return {step: 0.4,};}},methods: {onScrollEnd() {this.$api.screenApi.teamRanking().then((res) => {// 请求后 写入数据});},},beforeDestroy() {clearInterval(this.interval);this.interval = null;},};</script><style scoped lang="scss">.wrapper {width: 25%;height: 62px;background-image: url("../../../public/img/bigscreen/rightbg.png");background-size: 100% 100%;font-family: "newfont";position: relative;.content {display: flex;flex-direction: column;justify-content: center;align-items: center;.border {display: flex;justify-content: flex-end;padding-top: 0.8px;> span {color: #aad3ff;font-weight: bold;font-size: 4px;height: 8px;width: 50px;text-align: right;line-height: 7px;display: inline-block;margin-right: 4px;}}.title {width: 100%;padding: 3px;.title_header {width: 100%;height: 6px;line-height: 6px;background: #00295a;.title_header_item {font-size: 3px;color: #fff;font-weight: 600;float: left;text-align: center;width: 25%;}}.title_con {.seamless-warp2 {overflow: hidden;height: 40px;}.odd {background: #011d3e;}.even {background: #002a5b;}.title_con_item {width: 100%;span {float: left;margin-bottom: 0.5px;width: 25%;font-size: 3px;height: 7px;line-height: 7px;color: #fff;font-weight: 600;text-align: center;}}}}}::v-deep .mock {top: 0px;bottom: 0px;left: 0px;right: 0px;position: absolute;background: rgba(0, 41, 90, 0.6);.loading-tip {color: #fff;font-size: 4px;}}}</style>

vue-seamless-scroll官网

链接: link.