guangdongVR_museum/code/src/views/gdmuseum/exhibition/permanent.vue

<template>
  <div class="temporary">
    <ui-search v-model="searchKey" :placeholder="'请输入展览名称'"></ui-search>
    <div class="searchNone" v-if="list.length === 0">
      <img src="@/assets/images/resource/searchNone.svg" alt="" />
      <p>暂时没有数据</p>
    </div>

    <ul
      v-else
      v-infinite-scroll="getData"
      infinite-scroll-disabled="busy"
      :infinite-scroll-immediate-check="true"
      infinite-scroll-distance="30"
      :key="ran"
    >
      <li v-for="(item, i) in list" :key="i">
        <exItem :exData="item" />
      </li>
    </ul>
  </div>
</template>

<script setup>
import { defineEmits, onMounted, watch, nextTick, ref } from "vue";

import exItem from "@/components/exItem";
import { getExhibitionList } from "@/config/api";

const searchKey = ref("");

const busy = ref(false);

const list = ref([]);

let paging = ref({
  pageSize: 10,
  pageNum: 1,
  current: 1,
});

watch(searchKey, () => {
  getData(true);
});

const getData = (reset = null) => {
  if (reset) {
    list.value = [];
    busy.value = false;
  }
  if (busy.value) {
    return;
  }
  getExhibitionList(
    {
      pageNum: paging.value.pageNum,
      pageSize: paging.value.pageSize,
      museumId: 1,
      searchKey: searchKey.value,
      type: "long",
    },
    (data) => {
      if (data.data.total <= list.value.length) {
        busy.value = true;
        return;
      }
      list.value = list.value.concat(data.data.records);
      paging.value.pageNum += 1;
    }
  );
};

onMounted(() => {
  getData();
});
</script>
  
<style lang="scss" scoped>
.temporary {
  width: 1400px;
  margin: 62px auto;

  .slebar {
    display: flex;

    > div {
      margin-left: 20px;
    }
  }

  > ul {
    width: 100%;

    > li {
      width: 100%;
      position: relative;

      &::after {
        content: "";
        display: inline-block;
        background: #d9c791;
        height: 1px;
        width: 110%;
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
      }
    }
  }
}
</style>