当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 原生js实现上拉加载

原生js实现上拉加载

2020年07月27日  | 移动技术网IT编程  | 我要评论

在这里插入图片描述

地址列表组件没有无法使用上拉加载，所以原生js实现

  1. 给列表部分注册touchmove事件，监听用户滑动屏幕
  2. 判断滚动条的位置距离底部高度为100时，page+1，并且拉去接口
  3. 当接口调取过程中或者已经没有新的收据的时候，阻止page+和掉接口
    方案：loading和finished初始值为false，当开始掉接口时loading为true，接口成功为false；
    接口返回数据为空finish为true
    ==》当loading或finish为true时，return
网页正文全文高：document.body.scrollHeight
网页可见区域高：document.body.clientHeight
网页被卷去的高：document.body.scrollTop
==》滚动条距离底部的高度=document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight

 mounted() {
    this.init();
    let listObj = document.querySelector(".van-radio-group");  //页面地址list的盒子
    listObj.addEventListener("touchmove", () => {
      let height =
        listObj.scrollHeight - listObj.scrollTop - listObj.clientHeight;
      console.log(height);
      if (height < 110) {
        if (this.loading || this.finished) return;
        this.page += 1;
        console.log("当前", this.page);
        this.init();
      }
    });
  },

init() {
      if (this.loading || this.finished) return;
      this.loading = true;
      this.axios
        .post("/api/address/index", { page: this.page })
        .then((data) => {
          if (data.length > 0) {
          	//bug1：十条以内结束
         	 if (data.length < 10) {
              this.finished = true;
            }
            data.forEach((item) => {
              this.$set(item, "tel", item.phone);
              this.$set(item, "id", item.address_id);
              this.$set(
                item,
                "address",
                item.province_name +
                  " " +
                  item.city_name +
                  " " +
                  item.district_name +
                  " " +
                  item.details
              );
              if (!this.source && item.status == 1) {
                this.chosenAddressId = item.address_id;
              }
            });
            this.list = this.list.concat(data);
            this.loading = false;
          } else {
            this.finished = true;
          }
        });
    },

	//bug2：在手机上获取不到滚动条的位置，需要给外层盒子高度100vh，竖向可滚动
	.address {
	  height: 100vh;
	  overflow-y: scroll;
	  .list {
	    height: 100vh;
	    overflow-y: scroll;
	    padding: 0 0 0 5px; //去掉原来的padding
	    .van-radio-group {
	      height: 92vh; //bug3：不够一屏时不能滚动，超出时滚动
	      overflow-y: scroll;
	    }
	  }
	}

本文地址：https://blog.csdn.net/weixin_43848576/article/details/107563174

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网