欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

原生js实现上拉加载

程序员文章站 2022-08-06 20:59:03
地址列表组件没有无法使用上拉加载,所以原生js实现给列表部分注册touchmove事件,监听用户滑动屏幕判断滚动条的位置距离底部高度为100时,page+1,并且拉去接口当接口调取过程中或者已经没有新的收据的时候,阻止page+和掉接口方案:loading和finished初始值为false,当开始掉接口时loading为true,接口成功为false;接口返回数据为空finish为true==》当loading或finish为true时,return网页正文全文高:document.b....

原生js实现上拉加载

地址列表组件没有无法使用上拉加载,所以原生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

相关标签: js vue vant