• 列表自动滚动


    实现功能:列表自动滚动,鼠标进入停止滚动,鼠标滚轮可滑动查看

    注: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; 61px;font-family: DIN-Bold;">NO.{{index +1}}</span>
                    <el-tooltip :disabled="!tipDisabled" class="item" effect="dark" :content="item.name" placement="top">
                      <span style="116px;" @mouseenter="visibilityChange($event)">{{item.orgName}}</span>
                    </el-tooltip>
                    <span style="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)
       },
  • 相关阅读:
    04.用户故事与敏捷方法--搜集故事笔记
    01.用户故事与敏捷方法——起步笔记
    00-B.用户故事与敏捷方法前言笔记
    00-A.用户故事与敏捷方法序言笔记
    14.表单脚本——JavaScript高级程序设计(笔记)
    13.事件——JavaScript高级程序设计(笔记)
    17.错误处理与调试——JavaScript高级程序设计(笔记)
    12.DOM2和DOM3——JavaScript高级程序设计
    11.DOM扩展——JavaScript高级程序设计(笔记)
    10.Dom——JavaScript高级程序设计(笔记)
  • 原文地址:https://www.cnblogs.com/dandanyajin/p/16245904.html
Copyright © 2020-2023  润新知