src/api/home/main.ts

@@ -261,11 +261,12 @@ export async function getPictureList(params: any): Promise<any> {
     headers: { 'Content-Type': ContentTypeEnum.FORM_DATA },
   })
 
-  const { data: { records, pages, total } } = res
+  const { data: { records, pages, total, current } } = res
   return {
     pageCount: pages,
     data: records,
     total,
+    current,
   }
 }
 

src/views/home/content/Content.vue

@@ -61,6 +61,7 @@ const deviceHeight = ref(600)
 // let _imagesload: any
 // const masonryRef = ref<ComponentRef>(null)
 const el = ref<HTMLDivElement | null>(null)
+const waterfallRef = ref(null)
 const viewMode = ref('masonry')
 const pagination = reactive({
   pageNo: 0,
@@ -145,16 +146,16 @@ useInfiniteScroll(
 )
 
 onBeforeMount(async () => {
-  const more = await featchList()
+  // const more = await featchList()
-  more.forEach((item) => {
+  // more.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
+  //   item.calHeight = 182 * item.high / item.wide
-  })
+  // })
-  listData.value = more
+  // listData.value = more
-  const tmore = await featchList()
+  // const tmore = await featchList()
-  tmore.forEach((item) => {
+  // tmore.forEach((item) => {
-    item.calHeight = 182 * item.high / item.wide
+  //   item.calHeight = 182 * item.high / item.wide
-  })
+  // })
-  listData.value = listData.value.concat(tmore)
+  // listData.value = listData.value.concat(tmore)
   const screenWidth = window.screen.width
   if (screenWidth > 1920 && screenWidth <= 2560)
     cols.value = 11
@@ -218,6 +219,16 @@ watch(
   },
 )
 
+watch(
+  () => configStore.getAsideValue,
+  async (newVal, oldVal) => {
+    if (newVal) {
+      reset()
+      loadMore()
+    }
+  },
+)
+
 async function featchList(userSearchId?: string) {
   loading.value = true
   try {
@@ -235,6 +246,7 @@ async function featchList(userSearchId?: string) {
       pageCount: 0,
       data: [],
       total: 0,
+      current: 1,
     }
     const sortObj: any = {} // rao start
     if (sortBy.orderbyvalue == 'pictureResult')
@@ -266,12 +278,14 @@ async function featchList(userSearchId?: string) {
         upUserName: searchValue,
       })
     }
-    const { data, pageCount, total } = result
+    const { data, pageCount, total, current } = result
+    pagination.pageNo = current
     totalCount.value = total
     canloadMore = pageCount >= pagination.pageNo && pageCount > 0
 
     const list = data.map((item) => {
       return {
+        id: item.id,
         calHeight: 0,
         imgUrl: item.imgurl,
         thumburl: item.serverThumbnailUrl,
@@ -306,8 +320,22 @@ async function loadMore() {
     item.calHeight = 182 * item.high / item.wide
   })
   // listData.value.push(...more)
+  if (pagination.pageNo == 1) {
+    listData.value = []
+    listData.value = listData.value.concat(more)
+    console.log('listData.value出来了', listData.value)
+    waterfallRef.value?.resize()
+  }
+  else {
+    // setTimeout(() => {
+    //   const height = el.value?.scrollHeight - 1000
+    //   console.log('listData.value出来了height', height)
+    //   el.value?.scrollTo({ top: height, behavior: 'smooth' })
+    // }, 50)
     listData.value = listData.value.concat(more)
     console.log('listData.value出来了', listData.value)
+    waterfallRef.value?.mix()
+  }
 }
 
 const gridHeight = computed(() => {
@@ -498,34 +526,34 @@ watch(
   { deep: true },
 )
 
-function reset() {
+function reset(val?) {
   pagination.pageNo = 0
   pagination.pageSize = 30
+  listData.value = []
   listData.value.length = 0
   loading.value = false
   canloadMore = true
   filterId = null
-
   // layout()
 }
 
 async function refreshHandler(filtersearchId?: any) {
-  reset()
+  reset(true)
 
   if (filtersearchId)
     filterId = filtersearchId
-
+  loadMore(true)
-  nextTick(() => {
+  // nextTick(() => {
-    setTimeout(() => {
+  //   setTimeout(() => {
-      useInfiniteScroll(
+  //     useInfiniteScroll(
-        el as any,
+  //       el as any,
-        () => {
+  //       () => {
-          loadMore()
+  //         loadMore()
-        },
+  //       },
-        { distance: 10, canLoadMore: () => canloadMore },
+  //       { distance: 10, canLoadMore: () => canloadMore },
-      )
+  //     )
-    }, 300)
+  //   }, 300)
-  })
+  // })
 }
 
 function getAvatar(url: string): string {
@@ -750,17 +778,17 @@ defineExpose({
           <span style="color: #507afd; font-weight: 500">{{ totalCount }}</span> 项</span>
       </div>
 
-      <n-spin :show="loading">
+      <!-- <n-spin :show="loading"> -->
       <div v-if="viewMode != 'masonry'" ref="el" class="scroll" :style="listStyle">
         <div class="grid" :style="{ 'grid-template-columns': `repeat(${cols}, 182px)` }">
           <div
             v-for="(item, index) in listData"
-              :key="item.calHeight"
+            :key="item.id"
             :style="{ height: `${gridHeight}px` }"
             class="grid-item"
           >
             <img
-                :key="item.thumburl"
+              :key="item.id"
               v-lazy="item.thumburl"
               :class="{
                 'img-fit': viewMode === 'horizontalVersion',
@@ -861,14 +889,14 @@ defineExpose({
         </div>
       </div>
       <div v-if="viewMode === 'masonry'" ref="el" class="scroll" :style="listStyle">
-          <waterfall :col="cols" :data="listData" :gutter-width="10" @finish="finish">
+        <waterfall ref="waterfallRef" :col="cols" :data="listData" :gutter-width="10" @finish="finish">
           <div
             v-for="(item, index) in listData"
-              :key="item.calHeight"
+            :key="item.id"
             class="grid-item"
           >
             <img
-                :key="item.thumburl"
+              :key="item.id"
               v-lazy="item.thumburl"
               :class="{
                 'img-fit': viewMode === 'horizontalVersion',
@@ -968,7 +996,7 @@ defineExpose({
           </div>
         </waterfall>
       </div>
-      </n-spin>
+      <!-- </n-spin> -->
     </div>
     <PackageSettingsModal ref="packageModalRef" @commit="commitHandler" />
     <GeneratePackageModal ref="generateModalRef" />