一、安裝
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">規(guī)格型號</li>
<li class="surveied">取樣日期</li>
<li class="room">推送功能室</li>
<div class="man">推送人</div>
<li class="spen">推送時間</li>
<li class="supply">接應(yīng)時間</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: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
{
F_FullName: "鋼膠線",
trapDaily: "規(guī)格型號",
isSale: "2021-03-22",
noSale: "中心實驗室",
man: "李貴",
salePen: "2021-02-25",
supply: "2021-06-05",
},
],
};
},
computed: {
optionSetting() {
return {
step: 0.9, // 數(shù)值越大速度滾動越快
limitMoveNum: 8, // 開始無縫滾動的數(shù)據(jù)量 this.dataList.length
hoverStop: true, // 是否開啟鼠標懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, // 開啟數(shù)據(jù)實時監(jiān)控刷新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要設(shè)置
我的vue-seamless-scroll無縫滾動不滾動是因為我的頁面有切換按鈕，原來用v-show的時候只有默認頁面的可以滾動，改為v-if就可以了
image.png
