2020-11-12 pc端底部加载

pc端加载

	首先创建一个嵌套盒子
<div class="outer" @scroll="onScroll">
      <!-- 内层盒子 -->
      <div class="subcoat">
        <div v-for="(item,index) in 21" :key="index" class="main_style">{{item}}</div>
      </div>
    </div>

显示加载的盒子

 <!-- 底层加载 -->
    <div class="loading" v-show="isShow">
      <!-- <img src="" alt=""> -->
      加载中。。。。。
    </div>
  </div>

设置嵌套盒子的样式

.outer {
  width: 100%;
  height: 90vh;
  overflow: scroll;
  border: 1px solid;
  text-align: center;
}
.subcoat {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.main_style {
  width: 30%;
  height: 40vh;
  line-height: 40vh;
  border-radius: 25px;
  border: 1px solid grey;
  margin: 10px;
}

逻辑代码

data() {
    return {
      isShow: false
    };
  },
  methods: {
    onScroll(e) {
      // console.log(e);
      // 获取可视窗口的高度
      var clientHeight = e.target.clientHeight;
      // console.log(clientHeight);

      // 获取滚动元素的高度
      var scrollHeight = e.target.scrollHeight;
      // console.log(scrollHeight);

      // 获取滚动元素与顶部的距离
      var scrollTop = Math.floor(e.target.scrollTop);
      // console.log(scrollTop);

      if (scrollHeight - scrollTop - clientHeight < 2) {
        this.isShow = true;
        setTimeout(() => {
          this.isShow = false;
        }, 3000);
      }
    },
  }

若有不足的地方,还望打架能指出 谢谢啦0.e

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值