一、安装
npm install vue-seamless-scroll --save
二、在main.js页面引用
import scroll from "vue-seamless-scroll";
Vue.use(scroll);
如下图
image.png
三、代码如下
<template>
<div>
<div class="staDatas">
<!-- 表头 -->
<ul class="head">
<li class="ranking">序号</li>
<li class="name">样品名称</li>
<li class="Spec">规格型号</li>
<li class="surveied">取样日期</li>
<li class="room">推送功能室</li>
<div class="man">推送人</div>
<li class="spen">推送时间</li>
<li class="supply">接应时间</li>
</ul>
<!-- 滚动部分 -->
<vue-seamless-scroll
:data="trapDailyListDatas"
:class-option="optionSetting"
class="seamless-warps"
>
<ul class="item">
<li
v-for="(item, i) in trapDailyListDatas"
:key="i"
:class="{on:(i+1)%2==0,off:(i+1)%2!=0}"
>
<span class="ranking" v-text="i+1"></span>
<span class="name">
<!-- v-text="item.F_FullName" -->
<a href="javascript:void(0);" :title="item.F_FullName">{{item.F_FullName}}</a>
</span>
<span class="Spec" v-text="item.trapDaily"></span>
<span class="surveied" v-text="item.isSale"></span>
<span class="room" v-text="item.noSale"></span>
<span class="man" v-text="item.man"></span>
<span class="spen" v-text="item.salePen"></span>
<span class="supply" v-text="item.supply"></span>
</li>
</ul>
</vue-seamless-scroll>
<!-- </div> -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
trapDailyListDatas: [
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "钢胶线",
trapDaily: "规格型号",
isSale: "2021-03-22",
noSale: "中心实验室",
man: "李贵",
salePen: "2021-02-25",
supply: "2021-06-05",
},
],
};
},
computed: {
optionSetting() {
return {
step: 0.9, // 数值越大速度滚动越快
limitMoveNum: 8, // 开始无缝滚动的数据量 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: 100, // 单步运动停止的时间(默认值1000ms)
};
},
},
};
</script>
<style lang="less" scope>
.staDatas {
// height: 50%;
padding: 0rem 0.08rem 0.05rem;
font-size: 0.12rem;
display: flex;
flex-direction: column;
box-sizing: border-box;
.head {
display: flex;
background: #0a1f5c;
height: 0.35rem;
padding: 0 0.07rem;
margin: 0;
color: #79abef;
// border-bottom: 2px solid #21316e;
line-height: 0.35rem;
li {
list-style: none;
}
.ranking {
width: 9%;
text-align: center;
}
.name {
width: 13%;
}
.Spec {
width: 13%;
text-align: center;
}
.surveied {
width: 13%;
text-align: center;
}
.supply {
width: 13%;
text-align: center;
}
.man {
width: 13%;
text-align: center;
}
.room {
width: 13%;
text-align: center;
}
.spen {
width: 13%;
text-align: center;
}
}
.seamless-warps {
overflow: hidden;
flex: 1;
color: #c9c9c9;
height: 2rem;
ul {
padding-bottom: 0.05rem;
li {
list-style: none;
height: 0.48rem;
padding: 0 0.07rem;
display: flex;
line-height: 0.5rem;
// border-bottom: 1px solid #21316e;
.ranking {
display: inline-block;
width: 9%;
text-align: center;
}
.name {
width: 13%;
display: inline-block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
a {
color: #c9c9c9;
text-decoration: none;
}
}
.Spec {
display: inline-block;
width: 13%;
text-align: center;
}
.surveied {
display: inline-block;
width: 13%;
text-align: center;
}
.supply {
width: 13%;
text-align: center;
}
.man {
width: 13%;
text-align: center;
}
.room {
display: inline-block;
width: 13%;
text-align: center;
}
.spen {
display: inline-block;
width: 13%;
text-align: center;
}
}
}
}
}
.on {
background: #041047;
}
.off {
background: transparent;
}
</style>
注意：optionSetting要写在 computed里面，limitMoveNum要设置
我的vue-seamless-scroll无缝滚动不滚动是因为我的页面有切换按钮，原来用v-show的时候只有默认页面的可以滚动，改为v-if就可以了
image.png
