1. npm 下载依赖
npm install vue-seamless-scroll --save
2.在需要使用的页面引入
import vueSeamlessScroll from 'vue-seamless-scroll'
components: {
vueSeamlessScroll
},
3.完整代码
<template>
<div>
<vue-seamless-scroll
:data="dataArr.eventData"
class="seamless-warp"
:class-option="classOption"
@ScrollEnd="scrollEnd"
ref="seamlessScroll"
>
<!-- 需实现滚动代码 -->
</vue-seamless-scroll>
</div>
</template>
<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
name: "RightModulesThree",
components: { vueSeamlessScroll },
data() {
return {};
},
computed: {
classOption() {
return {
step: 0.3, // 数值越大速度滚动越快
limitMoveNum:9, // 开始无缝滚动的数据量 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)
};
},
},
methods: {
setDian(i,e){
let data = e.target.dataset;
this.$emit("supervise-detail", data.name, data.type);
this.$refs.seamlessScroll.reset(); // 表示重置意思
let target = e.target;
if(target.tagName == "SPAN") {
console.log(i,'789456')
console.log(e,'1111')
}
},
},
};
</script>
<style scoped lang="scss">
.box_right_3 {
flex: 1;
overflow: hidden;
background-size: 100% 100%;
font-family: Alibaba-PuHuiTi-R;
font-size: 14px;
color: #ade2ff;
letter-spacing: 0;
}
.seamless-warp {
width: 100%;
margin: 8px 0px;
color: white;
overflow: hidden;
.warp-item {
display: flex;
justify-content: space-between;
font-size: 14px;
color: #FFFFFF;
align-items: center;
height: 48px;
.item_con {
background-size: 100% 100%;
padding: 2px 0px;
color: #04d6de;
}
}
}
.warp-item-one{
display: flex;
justify-content: space-between;
font-size: 14px;
color: #FFFFFF;
align-items: center;
height: 48px;
}
.gd_title{
display: flex;
justify-content: space-between;
align-items: center;
color: #76CCF4 ;
font-size: 14px;
margin-top: 22px;
height: 36px;
background: linear-gradient(207deg, rgba(96,157,215,0.1) 0%, rgba(129,189,250,0.6) 100%);
}
.shenpi{
background-size: 100% 100%;
color:#FF5000 ;
}
</style>
标签：vue,滚动,color,100%,seamless,列表,font,size From： https://www.cnblogs.com/zsc1996/p/16852385.html