van-list 下拉加载更多

<template>
  <div class="yqxx">
    <NavBar :title="navTitle"
            :showLeftArrow="showLeftArrow" />
    <div class="yjNum">
      <van-icon :name="getImageUrlForPublic('csf_icon')"
                size="16" />
      <span> 预警数量：{{ overFortifyNumber }}个 </span>
    </div>
    <div class="tableDiv">
      <div class="commonTable">
        <div class="tableContent">
          <div class="tableHeader">
            <span v-for="(item, index) in tableObj.header"
                  :key="index">{{
          item
        }}</span>
          </div>
          <div class="tableCon"
               v-if="tableObj.list.length > 0">
            <van-list v-model:loading="loading"
                      :finished="finished"
                      :immediate-check="false"
                      finished-text="没有更多了"
                      @load="onLoad">
              <ul>
                <li class="list moreTextList"
                    v-for="(item, index) in tableObj.list"
                    :key="item.id"
                    @click="goTo(item)">
                  <span>{{ index + 1 }}</span>
                  <span>{{ item.stName }}</span>
                  <span>{{ item.time || "--" }}</span>
                  <span>{{ item.rain05 || "--" }}</span>
                  <span>{{ item.rainDay || "--" }}</span>
                  <span>{{ item.type || "--" }}</span>
                  <span>
                    <i class="circular"
                       :class="
                  item.wornLevel == 0
                    ? 'green'
                    : item.wornLevel == 1
                      ? 'blue'
                      : item.wornLevel == 2
                        ? 'yellow'
                        : item.wornLevel == 3
                          ? 'orange'
                          : 'red'
                "></i>
                  </span>
                </li>
              </ul>

            </van-list>
          </div>
          <div class="tableCon"
               v-else>
            <van-empty description="暂无数据" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

  <script>
import NavBar from "@/srccomponents/NavBar.vue";
import commonTable from "@/srccomponents/commonTable.vue";
import { ref, onMounted, reactive, toRefs, onBeforeUnmount } from "vue";
import { queryrainstation } from "@/services";
import bus from "@/utils/util";
import { getImageUrlForPublic } from '@/utils/util'
export default {
  name: "yqxx",
  components: { NavBar, commonTable },
  setup () {
    const commonTable = ref(null)
    const allData = reactive({
      navTitle: "雨情信息",
      showLeftArrow: true,
      loading: false, //加载状态
      finished: false, //是否加载
      tableObj: {
        header: ["序号", "站名", "监测时间", "实时降雨", "日降雨量", "类型", "预警"],
        list: [],
        router: "yqxxDetails",
        type: "yqxx",
        size: 15,
        current: 1,
      },
      overFortifyNumber: "",
      pages: null,
    });
    const getQueryData = async () => {
      let res = await queryrainstation({
        size: allData.tableObj.size,
        current: allData.tableObj.current,
      });
      if (res && res.code == 200) {
        allData.loading = false;
        allData.tableObj.list = allData.tableObj.list.concat(
          res.data.pagedata.records
        );
        allData.pages = res.data.pagedata.pages;
        allData.overFortifyNumber = res.data.warnNumber;
      }
    };
    const onLoad = () => {
      allData.tableObj.current += 1;
      if (allData.tableObj.current <= allData.pages) {
        getQueryData();
      } else {
        allData.finished = true
      }
    };
    onMounted(() => {
      getQueryData();
    });
    onBeforeUnmount(() => {
      bus.off("onLoad");
    });
    return {
      commonTable,
      ...toRefs(allData),
      getImageUrlForPublic,
      onLoad,
    };
  },
};
  </script>

  <style lang='less' scoped>
.yqxx {
  width: 100%;
  height: 100vh;
  background: #f8f8f8;
  .yjNum {
    padding: 0 20px;
    height: 40px;
    display: flex;
    align-items: center;
    span {
      margin-left: 5px;
      font-family: "PingFang SC";
      font-style: normal;
      font-size: 16px;
      color: #ff0303;
    }
  }
  .tableDiv {
    padding: 10px;
    .tableHeader {
      height: 40px;
      background: #eaeff9;
      display: flex;
      flex-direction: row;
      align-items: center;
      span {
        flex: 1;
        font-size: 14px;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        color: #5782f7;
        text-align: center;
      }
    }
    ul {
      .list {
        display: flex;
        height: 40px;
        &:last-child {
          border-bottom: 1px solid #f2f1f1;
        }
        span {
          display: block;
          width: 100%;
          height: 100%;
          flex: 1;
          line-height: 40px;
          font-size: 14px;
          color: #333333;
          text-align: center;
          border-top: 1px solid #f2f1f1;
          border-left: 1px solid #f2f1f1;
          &:last-child {
            border-right: 1px solid #f2f1f1;
          }
        }
      }
    }
  }
}
.commonTable {
  background: #f8f8f8;

  .tableTitle {
    height: 50px;
    display: flex;
    align-items: center;

    span {
      margin-left: 5px;
      font-size: 16px;
      font-family: "PingFang SC";
      font-style: normal;
      font-weight: 400;
      color: #333333;
    }
  }

  .tableContent {
    .tableHeader {
      height: 40px;
      background: #eaeff9;
      display: flex;
      flex-direction: row;
      align-items: center;

      span {
        flex: 1;
        font-size: 14px;
        font-family: "PingFang SC";
        font-style: normal;
        font-weight: 400;
        color: #5782f7;
        text-align: center;
        &:nth-child(1) {
          flex: 0.7;
        }
        &:nth-child(2),
        &:nth-child(3) {
          flex: 2;
        }
      }
    }

    .tableCon {
      ul {
        .list {
          display: flex;
          height: 40px;

          &:last-child {
            border-bottom: 1px solid #f2f1f1;
          }

          span {
            flex: 1;
            font-size: 14px;
            color: #333333;
            text-align: center;
            border-top: 1px solid #f2f1f1;
            border-left: 1px solid #f2f1f1;
            display: flex;
            justify-content: center;
            align-items: center;
            line-height: 20px;
            &:nth-child(1) {
              flex: 0.7;
            }
            &:nth-child(2),
            &:nth-child(3) {
              flex: 2;
            }
            &:last-child {
              border-right: 1px solid #f2f1f1;
            }

            .circular {
              display: inline-block;
              width: 10px;
              height: 10px;
              border-radius: 50%;
            }
          }
        }

        .moreTextList {
          height: 90px;

        }
      }
    }
  }

 
}
</style>