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

<template>
  <div class="temporary">
    <ui-search v-model="searchKey" :placeholder="'请输入展览名称6'"></ui-search>
        <div class="searNone">
          <img src="../../" alt="">
        </div>

    <ul 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>