实现功能:列表自动滚动,鼠标进入停止滚动,鼠标滚轮可滑动查看
注:vite不能使用datav
<div @mousewheel.prevent="wheel" @mouseover="mouseOver" @mouseleave="mouseLeave">
<ul class="infinite_list" ref="scorll" infinite-scroll-distance="0" style="overflow:hidden">
<li v-for="(item,index) in rankingList" class="infinite-list-item" :key="index">
<span style="color:#1AFCFF;font-weight: bold;width: 61px;font-family: DIN-Bold;">NO.{{index +1}}</span>
<el-tooltip :disabled="!tipDisabled" class="item" effect="dark" :content="item.name" placement="top">
<span style="width:116px;" @mouseenter="visibilityChange($event)">{{item.orgName}}</span>
</el-tooltip>
<span style="width:47px;" @mouseenter="visibilityChange($event)">{{item.total}}</span>
</li>
</ul>
</div>
tipDisabled初始值为false,
scrollStart初始值为0,
scrollEnd初始值为43,即为li的高度
页面加载完成后就要开始调用this.setIntervalFn()
setIntervalFn(){ this.timer = setInterval(()=>{ this.$refs.scorll.scrollTo(this.scrollStart,this.scrollEnd) this.scrollStart+=43; this.scrollEnd+=43; //滚动距离小于 dom总高度 - 显示的4条数据dom的高度时,重新开始滚动 if(this.$refs.scorll.scrollTop > 43 * (this.rankingList.length -4)){ this.$refs.scorll.scrollTop =0 this.scrollStart=0; this.scrollEnd=43; } },1500) }, mouseOver(){ clearInterval(this.timer); }, mouseLeave(){ this.setIntervalFn(); }, visibilityChange(event) { this.tipDisabled = this.isEllipsis(event.target); }, isEllipsis(dom) { var checkDom = dom.cloneNode(), parent, flag; checkDom.style.width = dom.offsetWidth + 'px'; checkDom.style.height = dom.offsetHeight + 'px'; checkDom.style.overflow = 'auto'; checkDom.style.position = 'absolute'; checkDom.style.zIndex = -1; checkDom.style.opacity = 0; checkDom.style.whiteSpace = "nowrap"; checkDom.innerHTML = dom.innerHTML; parent = dom.parentNode; parent.appendChild(checkDom); flag = checkDom.scrollWidth > checkDom.offsetWidth; parent.removeChild(checkDom); return flag; }, wheel(e){ this.scrollEnd = this.scrollEnd - e.wheelDelta; if(this.scrollEnd < 0){ this.scrollEnd = 0; } if(this.scrollEnd > 43 * (this.rankingList.length -4)){ this.scrollEnd = 43 * (this.rankingList.length -4) } this.$refs.scorll.scrollTo(this.scrollStart,this.scrollEnd) },