vue2 vue3 无限滚动
vue2
import vueSeamlessScroll from 'vue-seamless-scroll' // vue2引入方式
<vue-seamless-scroll
class="scroll"
:class-option="classOption"
ref="vueSeamlessScroll"
:data="downNumberList"
@mousewheel.native="handleScroll">
<div class="echars-box">
<div class="echar-item" v-for="(item,index) in downNumberList" :key="index">
<div class="left">
<img v-if="index < 3" class="ranking-img" :src="getRankingImgUrl(index)" />
<span class="value">{{ index + 1 }}</span>
</div>
<div class="right">
<div class="right-top">
<p class="text">{{ item.title }}</p>
</div>
<div class="progress-box">
<el-progress :format="format" :percentage="item.downNum" >
</el-progress>
</div>
</div>
</div>
</div>
</vue-seamless-scroll> computed: {
classOption() {
return {
direction: 0,
step: 0.2, // 数值越大速度滚动越快
waitTime: 1000,
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)
};
},
}, // 滚动代码
handleScroll(e) {
// 改变组件内部 yPos 的值，这样html的translate(0, yPos)就会随之改变
// e.deltaY是滚动的距离
this.$refs.vueSeamlessScroll.yPos = this.$refs.vueSeamlessScroll.yPos - e.deltaY
// 如果是正数 说明是往上滚
if (this.$refs.vueSeamlessScroll.yPos > 0) {
this.$refs.vueSeamlessScroll.yPos = 0
return
}
// 如果yPos超过内部实际高度的一半则重新到顶部滚动
// 一半的原因是因为组件实际上创建了两个dom，以达到无缝衔接的效果
if (Math.abs(this.$refs.vueSeamlessScroll.yPos) >
this.$refs.vueSeamlessScroll.realBoxHeight / 2) {
this.$refs.vueSeamlessScroll.yPos = 0
}
}
format(percentage) {
return `${percentage}次`;
}vue3
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
<vue3-seamless-scroll
:list="itemData.rankingData"
:step="0.3"
:hover="true"
:limit-scroll-num="2"
:isWatch="true"
:wheel="true">
<div class="echar-item" v-for="(item, index) in itemData.rankingData" :key="index">
<div class="left" >
<img class="ranking-img" :src="getRankingImgUrl(index + 1)" />
<span class="value">{{ index + 1 }}</span>
</div>
<div class="right">
<div class="right-top">
<p class="text">{{item.companyName}}</p>
<div class="tag-box">
<p class="tag" v-if="item.isTop == '是'">县域龙头商贸</p>
<p class="tag">{{ item.typeName }}</p>
</div>
</div>
<div class="progress-box">
<el-progress :stroke-width="12" :percentage="item.percentage" >
<span>{{item.quarterSells}}</span>
</el-progress>
</div>
</div>
</div>
</vue3-seamless-scroll> css
.echars-box {
/* width: 580px;
margin-left: 15px;
margin-top: 20px;
height: 520px;
border-bottom: 1px solid #00000026;; */
margin-top: 5px;
height: 100%;
.echar-item {
display: flex;
flex-wrap: wrap;
height: 50px;
align-items: center;
padding-left: 10px;
.left {
margin-right: 5px;
position: relative;
width: 30px;
.ranking-img {
width: 30px;
height: 30px;
z-index: 1;
}
.value {
position: absolute;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
font-size: 10px;
}
}
.right {
flex: 1;
.right-top {
display: flex;
.text {
font-family: SourceHanSans-Regular;
font-weight: 400;
font-size: 12px;
color: #000000d9;
}
.tag-box {
flex: 1;
display: flex;
margin-left: 10px;
.tag {
height: 20px;
border-radius: 4px;
padding: 0 2px;
display: inline-block;
margin-left: 3px;
background: #167aff17;
border: 1px solid #0000000f;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 12px;
color: #00000073;
}
.tag1{
height: 20px;
border-radius: 4px;
padding: 0 2px;
display: inline-block;
margin-left: 3px;
background: #F6FFED;
border: 1px solid #D9F7BE;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 12px;
color: #52C41A;
}
/* :nth-child(2n + 1 ) {
background: #167aff17;
border: 1px solid #0000000f;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 12px;
color: #00000073;
}
:nth-child(2n + 2) {
background: #E6F4FF;
border: 1px solid #BAE0FF;
font-family: PingFangSC-Regular;
font-weight: 400;
font-size: 12px;
color: #1677FF;
} */
}
}
.progress-box {
margin-top: 3px;
padding-right: 10px;
}
}
}
&> :nth-child(2n - 1) {
background-color: #F6F8FA;
}
::v-deep .el-progress__text {
font-size: 13px !important;
}
}原文地址：https://blog.csdn.net/szzlh123456789/article/details/144433960
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！