vant-list的上拉加载和下拉刷新 + uniapp小程序页面高度计算

uniapp小程序页面高度计算

看不懂的话可以去看看这个博主的视频：https://www.bilibili.com/video/BV1Yg4y127Fp?p=80&vd_source=ebff660a6ef0a6cd2d5ffbfcf97a5312
export const get SheBeiXinXi = () => {
	let aa = uni.getSystemInfoSync();
	let statusBarHeight = aa.statusBarHeight || 0; //状态栏高度   也就是最顶部时间那一栏
	let padBod = aa.screenHeight - aa.safeArea.bottom; // 底部安全距离  也就是页面顶部到手机底部安全距离(ios手机那底部的小横条)
	
	 //胶囊按钮的信息  注意h5里面没有这个
	let titleBarHeight = 0
	let bb =null
	if (uni.getMenuButtonBoundingClientRect) {
		let menuButtonInfo=uni.getMenuButtonBoundingClientRect();
		//                       胶囊按钮的高度 +      胶囊按钮顶部    -   状态栏的高度
		titleBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;
		bb={
			show:true,
			data:menuButtonInfo
		}
	} else {
		// 有的没有胶囊按钮就直接返回40px高度
		titleBarHeight = 40;
		bb={
			show:false
		}
	}
	
	return {
		SheBeiXinXi:aa,//设备信息
		ZhuangTaiLan_Height:statusBarHeight,//状态栏高度
		bottom_Height:padBod,// 底部安全距离
		titleBarXinXi:bb,//胶囊按钮的信息
		titleBar_Height:titleBarHeight,//胶囊按钮的高度
	}
}

上拉加载和下拉刷新

  <div class="home">
 
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :distance="150"
        >
          <van-empty
            v-if="
              tableConfig.tableData.all &&
              tableConfig.tableData.all.length < 1 &&
              loading === false
            "
            description="未找到相关数据"
          />
          <div v-for="item in tableConfig.tableData.all" :key="item.number">
            666666
          </div>
        </van-list>
      </van-pull-refresh>

    
  </div>
</template>

<script>
import {
  ValidDepartmentList,
  GetJcHotelNewList,
  GetJcHouserentListPage,
} from "../api/index";
import { Toast } from "vant";
import {
  getDateStrings,
  getCurrentTime,
  getCookie,
  decodeCookies,
} from "../utile/tool";
export default {
  data() {
    return {
      loading: false,
      finished: false,
      refreshing: false,

      Cookie_USER: null,
      listTwo: [], //测试数据
      departmentOptions: [],
      show_Deptname: false,
      queryParams: {
        deptname: "", //部门
        adminname: "", //宿舍名称
        hotelname: "", //宿管员
        userid: null,
        name: "", //关键字
      },
      tableConfig: {
        tableData: {
          all: [], //获取的数据
          select: [], //存放选择的数据
          loading: false,
          finished: false,
          error: false,
        },
      },
      pageConfig: {
        //每页行数F_IsCutOff
        limit: 30,
        // 当前页
        page: 0,
        //总记录数
        count: 0,
      },
    };
  },
  created() {
  },
  computed: {},

  mounted() {
    this.departmentList();
  },
  methods: {
    // 搜索框搜索
    onSearch(val) {
      // console.log("搜索的", this.queryParams);
      this.pageConfig.page = 1;
      this.getPageList();
    },
    // 获取宿舍列表
    getPageList() {
      // console.log('数据接口')
      this.tableConfig.tableData.select.length = 0;

      if (this.queryParams.deptname === "全部(区域)") {
        this.queryParams.deptname = "";
      }

      let deptname = this.queryParams.deptname; //部门
      let adminname = this.queryParams.adminname; //宿舍名称
      let hotelname = this.queryParams.hotelname; //宿管
      let userid = this.queryParams.userid; //cookiues里面的id
      let page = this.pageConfig.page; //部门
      let limit = this.pageConfig.limit; //部门

      GetJcHotelNewList(
        deptname,
        adminname,
        hotelname,
        userid,
        page,
        limit
      ).then((data) => {
        // console.log("这个是数据", data);
        if (data.code !== 200) {
          Toast.fail(data.msg);
          return;
        }
        if (data.data.list.length == 0) {
          // 本次没有数据
          if (this.pageConfig.page > 1) {
            // 不是第一页，上拉加载
            this.finished = true; // 数据全部加载完毕
          } else {
            //第一页，下拉刷新
            this.tableConfig.tableData.all = [];
            this.pageConfig.count = 0;
            Toast.fail("暂无数据");
            this.refreshing = false;
          }
        } else {
          if (this.pageConfig.page > 1) {
            this.tableConfig.tableData.all =
              this.tableConfig.tableData.all.concat(data.data.list);
          } else {
            this.tableConfig.tableData.all = data.data.list;
            this.refreshing = false;
          }
          if (data.data.list.length < this.pageConfig.limit) {
            this.finished = true;
          }
        }
        this.pageConfig.count = data.data.count;

        // 更新 loading 和 finished 的状态值
        this.loading = false;
        // 如果数据全部加载完毕，则将 finished 置为 true
        if (this.finished) {
          Toast("已经没有更多数据了");
        }
      });
    },
    onLoad() {
      // console.log("上啦加载111", this.finished, this.loading);

      this.loading = true;
      this.pageConfig.page++;
      // console.log("上啦加载222", this.finished, this.loading);

      this.getPageList();
    },
    onRefresh() {
      // console.log("下拉刷新111", this.finished, this.loading);
      // 下拉刷新
      this.pageConfig.page = 1;
      this.finished = false; // 每次下拉刷新，要将finished置为false
      this.getPageList();
      // console.log("下拉刷新222", this.finished, this.loading);
    },
  },
};
</script>

<style lang="less" scoped>
</style>