vue项目中自定义表格滚动，鼠标移入停止，移出继续滚动

最新推荐文章于 2024-03-28 14:23:03 发布

birdcoder

最新推荐文章于 2024-03-28 14:23:03 发布

阅读量760

点赞数 1

分类专栏： vue 文章标签： vue.js javascript css less html5

本文链接：https://blog.csdn.net/birdcoder/article/details/125200278

版权

vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

vue项目中自定义表格滚动，鼠标移入停止，移出继续滚动

示例图片
自定义表格页面搭建

示例图片

表格滚动

自定义表格页面搭建

html

<div class="details">
	//表格头部
    <div class="details-header flex-c">
      <div class="header-item order">序号</div>
      <div class="header-item name">名称</div>
      <div class="header-item type">
        <div class="top">类别</div>
        <div class="bottom">
          <span class="bottom-item">企业债券</span>
          <span class="bottom-item">金融机构贷款</span>
          <span class="bottom-item">借托融资租赁</span>
          <span class="bottom-item">其他</span>
          <span class="bottom-item">合计</span>
        </div>
      </div>
      <div class="header-item balance">
        <div class="top">截至上月末金额</div>
        <div class="bottom">
          <span class="bottom-item">企业债券</span>
          <span class="bottom-item">金融机构贷款</span>
          <span class="bottom-item">借托融资租赁</span>
          <span class="bottom-item">其他</span>
          <span class="bottom-item">合计</span>
        </div>
      </div>
      <div class="header-item total">小计</div>
      <div class="header-item date">2022年1-4月</div>
      <div class="header-item month">5-12月</div>
    </div>
    //表格内容滚动区域
    <div class="details-contents">
       //这里要加上ref和鼠标移入移出事件
      <div
        class="hidden-scroll"
        ref="table"
        @mouseenter="mouseEnter()"
        @mouseleave="mouseLeave()"
      >
        <div
          class="body-item flex-c"
          v-for="(item, index) of detailData"
          :key="index"
        >
          <div class="item">{{ index + 1 }}</div>
          <div class="item">{{ item.companyname }}</div>
          <div class="item">{{ item.con_qyzq }}</div>
          <div class="item">{{ item.con_jrjg }}</div>
          <div class="item">{{ item.con_xtrz }}</div>
          <div class="item">{{ item.con_othe }}</div>
          <div class="item">{{ item.con_total }}</div>
          <div class="item">{{ item.end_qyzq }}</div>
          <div class="item">{{ item.end_jrjg }}</div>
          <div class="item">{{ item.end_xtrz }}</div>
          <div class="item">{{ item.end_othe }}</div>
          <div class="item">{{ item.end_total }}</div>
          <div class="item">{{ item.interest_total }}</div>
          <div class="item">{{ item.interest_this_month }}</div>
          <div class="item">{{ item.interest_next_month }}</div>
        </div>
      </div>
    </div>
  </div>

注意内容滚动区域的的父盒子要加上ref和移入移出事件，，，上面代码有

 	<div
        class="hidden-scroll"
        ref="table"
        @mouseenter="mouseEnter()"
        @mouseleave="mouseLeave()"
      >

css，，，这里我用的less

<style lang="less" scoped>
* {
  color: #fff;
}
.flex-c {
	display: flex;
	align-items: center;
}
.details {
  height: 100%;
  width: 100%;
  padding: 0 10px 0 23px;
  .details-header {
    width: 100%;
    height: 66px;
    .header-item {
      height: 100%;
      line-height: 66px;
      border: 1px solid #00e4fe80;
      color: #00e4fe;
      font-size: 14px;
      text-align: center;
    }
    .order {
      width: 74px;
    }
    .name {
      width: 161px;
    }
    .type,
    .balance {
      width: 583px;
      line-height: normal;
      .top,
      .bottom {
        height: 50%;
        line-height: 33px;
        width: 100%;
        color: #00e4fe;
      }
      .bottom {
        .bottom-item {
          color: #00e4fe;
          border: 1px solid #00e4fe80;
          display: inline-block;
          width: 20%;
          border-bottom: 0 none;
          &:first-child {
            border-left: 0 none;
          }
          &:last-child {
            border-right: 0 none;
          }
        }
      }
    }
    .total,
    .date,
    .month {
      width: 127px;
    }
  }
  .details-contents {
    width: 100%;
    height: calc(100% - 66px);
    margin-top: 4px;
    overflow: hidden;
    margin-left: -17px;

    .hidden-scroll {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      margin-left: 17px;
    }
    .vue-scroll {
      width: 100%;
      height: 100%;
      overflow-y: hidden;
    }
    .body-item {
      height: 32px;
      line-height: 32px;
      width: 100%;
      border: 1px solid #00e4fe10;
      background: #172e4f;
      &:first-child {
        .item {
          color: #a6f701;
        }
      }
      &:nth-child(2n + 1) {
        border: 1px solid #00e4fe30;
        background: #05e9ff16;
      }
      .item {
        width: 115.6px;
        text-align: right;
        padding-right: 15px;
        font-size: 12px;
        &:first-child {
          width: 73px;
          text-align: center;
          padding-right: 0px;
        }
        &:nth-child(2) {
          width: 160px;
          text-align: left;
          padding-left: 20px;
          padding-right: 0px;
        }
        &:nth-last-child(1),
        &:nth-last-child(2),
        &:nth-last-child(3) {
          width: 124px;
        }
      }
    }
  }
}
</style>

数据定义

 data() {
    return {
      // 表格数据，，，数据多创建点，，才有滚动效果，，可以在样式里高度调小一点
      detailData: [
        {
          companyname: "全市合计",
          con_qyzq: "26606.94",
          con_jrjg: "26606.94",
          con_xtrz: "26606.94",
          con_othe: "26606.94",
          con_total: "26606.94",
          end_qyzq: "26606.94",
          end_jrjg: "26606.94",
          end_xtrz: "26606.94",
          end_othe: "26606.94",
          end_total: "26606.94",
          interest_total: "26606.94",
          interest_this_month: "26606.94",
          interest_next_month: "26606.94",
        },
      ],
      //定时器
      timer: null,
      // 鼠标是否进入
      enter: false,
      // 表单是否能滚动
      isScorll: true,
    };
  },

滚动方法、鼠标移入移出方法

 mounted() {
    this.ceshiData();
    this.tableScroll();
  },
 methods:{
	 // 测试数据,,造假数据
    ceshiData() {
      for (let i = 0; i < 20; i++) {
        this.detailData.push({
          companyname: "全市合计",
          con_qyzq: "26606.94",
          con_jrjg: "26606.94",
          con_xtrz: "26606.94",
          con_othe: "26606.94",
          con_total: "26606.94",
          end_qyzq: "26606.94",
          end_jrjg: "26606.94",
          end_xtrz: "26606.94",
          end_othe: "26606.94",
          end_total: "26606.94",
          interest_total: "26606.94",
          interest_this_month: "26606.94",
          interest_next_month: "26606.94",
        });
      }
    },
    /**
     * @desc 鼠标进去表格触发
     **/
    mouseEnter() {
      this.enter = true;
      if (!this.isScorll) return;
      clearInterval(this.timer);
    },
    /**
     * @desc 鼠标出去表格触发
     **/
    mouseLeave() {
      this.enter = false;
      if (!this.isScorll) return;
      clearInterval(this.timer);
      this.tableScroll();
    },
    /**
     * @desc 表格滚动事件
     **/
    tableScroll() {
      // 拿到表格挂载后的真实DOM
      const divData = this.$refs.table;
      // 拿到元素后，对元素进行定时增加距离顶部距离，实现滚动效果(此配置为每100毫秒移动1像素)
      this.timer = setInterval(() => {
        // 元素自增距离顶部1像素,,,,没有滚动高度就一直是0
        divData.scrollTop += 1;
        // 可视高度 = 可滚动内容的高度
        if (divData.clientHeight == divData.scrollHeight) {
          // 如果相等了，，，则鼠标移入移出就让它都没有作用
          this.isScorll = false;
          return clearInterval(this.timer);
        }
        console.log(this.timer);
        // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
        if (
          divData.clientHeight + divData.scrollTop + 1 >
          divData.scrollHeight
        ) {
          clearInterval(this.timer);
          setTimeout(() => {
            // 如果鼠标进入了，，则不执行后面的，不再调用滚动事件新增新的定时器
            if (this.enter) return;
            divData.scrollTop = 0;
            this.tableScroll();
          }, 1000);
        }
      }, 40);
    },
}