修改滚到底部请求接口

src/components/assets/assetsContent.vue

@@ -1,11 +1,5 @@
 <template>
   <div class="assets-content">
-    <div class="assets-user">
-      <div class="assets-user-img">
-        <img src="" alt="">
-      </div>
-      <div class="assets-user-name">adderss</div>
-    </div>
     <div class="assets-content-nav">
       <li :class="{ active: navIndex == index}" v-for="(item, index) in navList" :key="index" @click="navTable(index)">
         {{ item.name }}
@@ -20,13 +14,14 @@
 </template>
 
 <script setup>
-import { ref } from "vue"
+import { ref, onMounted } from "vue"
 import OverView from "@/components/common/searchView/Overview.vue"
 import Status from "@/components/common/searchView/status.vue"
 import Collectibles from "./collectibles.vue"
 import Hanging from "./hanging.vue"
 import Trading from "./trading.vue"
 import { useMarketplaceStore } from "@/store/marketplace"
+
 const marketplaceList = useMarketplaceStore()
 
 const navList = ref([
@@ -57,23 +52,28 @@ const clearHeroAll = () => {
   marketplaceList.status = ''
 }
 
+onMounted(() => {
+})
+
 </script>
 
 <style lang="scss" scoped>
 .assets-content {
   width: 100%;
   height: 100%;
-  position: relative;
+  // position: relative;
-  top: -600px;
+  // top: -600px;
-  left: 0;
+  // left: 0;
-  .assets-user {
+  
-    .assets-user-img {}
-    .assets-user-name {}
-  }
   .assets-content-nav {
     display: flex;
     align-items: center;
     padding-left: 35px;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    padding-top: 90px;
+    background: #16141b;
     li {
       display: flex;
       align-items: center;
@@ -101,8 +101,12 @@ const clearHeroAll = () => {
     width: 100%;
     margin-top: 20px;
     .content-left {
-      width: 300px;
+      // width: 300px;
-      padding: 0 35px;
+      // height: 800px;
+      // position: sticky;
+      // top: 0;
+      // padding: 0 35px;
+      // padding-top: 120px;
     }
     .content-right {
       width: calc(100% - 300px);

src/components/assets/assetsHeader.vue

@@ -1,18 +1,46 @@
 <template>
   <div class="mkt-header">
+    <div class="assets-user">
+      <div class="assets-user-img">
+        <img src="@/assets/img/marketplace/0000.png" alt="">
+      </div>
+      <div class="assets-user-name">{{ localWalletStore.showAddress }}</div>
+    </div>
   </div>
 </template>
 
 <script setup>
 import { ref } from "vue"
+import {walletStore} from "@/store/wallet";
+
+const localWalletStore = walletStore()
 
 </script>
 
 <style lang="scss" scoped>
 .mkt-header {
   width: 100%;
-  height: 1000px;
+  .assets-user {
-  background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
+    display: flex;
-  background-size: 100% 100%;
+    // margin: 168px 0 45px 77px;
+    padding: 168px 0 45px 77px;
+    .assets-user-img {
+      width: 173.8px;
+      height: 173.8px;
+      // border: 1px solid #000;
+      margin-right: 25px;
+      border-radius: 20px;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .assets-user-name {
+      font-family: 'Poppins';
+      font-weight: bold;
+      font-size: 30px;
+      color: #FFFFFF;
+    }
+  }
 }
 </style>

src/components/assets/collectibles.vue

@@ -1,9 +1,11 @@
 <template>
   <div class="collection">
     <div class="content-left">
+      <div class="left-content-left">
         <OverView :overviewValue="overviewValue" @clickOverviewChild="overviewChild" />
         <Status :statusValue="statusValue" @clickStatusChild="statusChild" />
       </div>
+    </div>
     <div class="content-right">
       <div class="content-right-header">
         <div class="bg-cor"></div>
@@ -33,7 +35,9 @@ import Status from "@/components/common/searchView/statusRadio.vue";
 import Card from "./myCard.vue";
 import NftId from "@/configs/item.json"
 import { apiAssetsState } from "@/utils/marketplace"
+import {useMarketplaceStore} from "@/store/marketplace";
 import {walletStore} from "@/store/wallet";
+const marketplaceStore = useMarketplaceStore()
 const localWalletStore = walletStore()
 const nftList = ref([])
 
@@ -42,11 +46,13 @@ const statusValue = ref('0')
 
 const overviewChild = (val) => {
   overviewValue.value = val
+  marketplaceStore.cursorObj.next_cursor = ''
   getMyAssets()
 }
 
 const statusChild = (val) => {
   statusValue.value = val
+  marketplaceStore.cursorObj.next_cursor = ''
   getMyAssets()
 }
 
@@ -56,20 +62,47 @@ const getMyAssets = async () => {
   const data = {
     type: statusValue.value,
     page_size: '20',
-    cursor: '0',
+    cursor: marketplaceStore.cursorObj.next_cursor,
     search_name: overviewValue.value
   }
   if(myADdress) {
     try {
       let res = await apiAssetsState(myADdress, data)
       nftList.value = res.rows
+      marketplaceStore.cursorObj = res.page
     } catch(e) {
       console.log(e)
     }
   }
 }
 
+const handleScroll = () => {
+  const myADdress = localWalletStore.address
+  var scrollTop =
+  document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
+  var windowHeight =
+  document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
+  var scrollHeight =
+  document.documentElement.scrollHeight || document.body.scrollHeight;
+  if (scrollTop + windowHeight == scrollHeight) {
+  //请求数据接口
+  // this.seeMoreSchoolList();
+  // console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceStore.cursorObj), scrollTop, windowHeight, scrollHeight)
+  if(myADdress) {
+    if(toRaw(marketplaceStore.cursorObj).remaining != 0) {
+      // console.log('请求')
+      getMyAssets()
+    // } else {
+    //   console.log('不用请求')
+    }
+    return false;
+    }
+  }
+}
+
+
 onMounted(() => {
+  window.addEventListener("scroll", handleScroll, true);
   getMyAssets()
 })
 </script>
@@ -80,14 +113,24 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   margin-top: 30px;
+  background: #16141b;
+  box-shadow: 0 -10px 10px #16141b;
   .content-left {
     width: 300px;
+    height: 800px;
+    position: sticky;
+    top: 0;
     padding: 0 35px;
+    padding-top: 140px;
+    box-sizing: border-box;
+    .left-content-left {
+      // background: #fff;
+    }
   }
   .content-right {
     width: calc(100% - 300px);
     padding-right: 40px;
-    // background: #fff;
+    padding-top: 140px;
     .content-right-header {
       width: calc(100% - 10px);
       height: 60px;

src/components/assets/myCard.vue

@@ -273,7 +273,7 @@ onMounted(() => {
     display: flex;
     justify-content: center;
     align-items: center;
-    margin-bottom: 5px;
+    padding-bottom: 8px;
     >div {
       height: 57px;
       background: #1778f1;

src/components/marketplace/mktContent.vue

@@ -64,9 +64,9 @@
         <div class="pages" v-if="nftList != undefined && nftList.length > 0">
           <li v-for="(item, index) in nftList" :key="index">
             <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
+              <!-- <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
               <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
-              <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
+                <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" /> -->
-                <Card v-if="nftList != undefined || nftList.length > 0" @renewNft="renewNft" :nftData="item" />
           </li>
         </div>
         <div class="pages-no" v-else>
@@ -222,9 +222,13 @@ const renewNft = async() => {
 const getHeroData = async () => {
   loadingDialogVisible.value = false;
   try {
-    let res = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
+    const { errcode, errmsg, rows, page } = await marketplaceList.getMarketplaceState(marketplaceList.getParamsData)
-    nftList.value = res.rows
+    // console.log((toRaw(marketplaceList.cursorObj))
-    console.log(res,'-----')
+    if(!errmsg) {
+      nftList.value = rows
+      // marketplaceList.cursorObj = page
+      console.log(rows,'-----')
+    }
     // loadingDialogVisible.value = false;
   } catch(e) {
     // console.log(e)
@@ -244,9 +248,29 @@ watch(() => [marketplaceList.overview,marketplaceList.sort,marketplaceList.minPr
 })
 
 // 滚动条变化修改游标
-
+const handleScroll = () => {
+  var scrollTop =
+  document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
+  var windowHeight =
+  document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
+  var scrollHeight =
+  document.documentElement.scrollHeight || document.body.scrollHeight;
+  if (scrollTop + windowHeight == scrollHeight) {
+  //请求数据接口
+  // this.seeMoreSchoolList();
+  console.log('scrollTop + windowHeight == scrollHeight请求接口',toRaw(marketplaceList.cursorObj), scrollTop, windowHeight, scrollHeight)
+    // if(toRaw(marketplaceList.cursorObj).remaining == 0) {
+    //   console.log('请求',toRaw(marketplaceList.getParamsData), toRaw(marketplaceList.cursorObj))
+    //   // getMyAssets()
+    // } else {
+    //   console.log('不用请求')
+    // }
+    // return false;
+  }
+}
 
 onMounted(() => {
+  window.addEventListener("scroll", handleScroll, true);
   getHeroData()
 })
 </script>
@@ -257,7 +281,7 @@ onMounted(() => {
   display: flex;
   justify-content: space-between;
   background: #16141b;
-  box-shadow: 0 -30px 30px #16141b;
+  box-shadow: 0 -10px 10px #16141b;
   .mkt-content-left {
     position: -webkit-sticky;
     position: sticky;
@@ -281,6 +305,7 @@ onMounted(() => {
     width: calc(100% - 300px);
     padding-right: 40px;
     margin-left: 40px;
+    padding-top: 100px;
     .mkt-content-right-header {
       width: calc(100% - 10px);
       height: 60px;

src/store/marketplace.js

@@ -13,6 +13,12 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
   const status = ref([])
   const getCartList = ref([])
   const currencyPrice = ref([])
+  const cursorObj = ref({
+    count: 0,
+    next_cursor: '',
+    previous_cursor: '',
+    remaining: ''
+  })
   const getParamsData = ref({
     page_size: 20,
     cursor: '',
@@ -81,7 +87,7 @@ export const useMarketplaceStore = defineStore('marketplace', () => {
   }
 
   return {
-    getParamsData,
+    getParamsData, cursorObj,
     overview, updateOverviewStatus,
     sort, updateSortStatus,
     minPrice, updateMinPriceStatus,

src/views/AssetsView.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="market">
+  <div class="market"   ref="contentScroll">
+    <div class="header">
       <MktHeader />
+    </div>
+    <!-- <div class="header"></div> -->
     <MktContent class="content" />
   </div>
 </template>
@@ -11,13 +14,49 @@ import { ref, reactive, onMounted, onUnmounted } from "vue";
 import MktHeader from '@/components/assets/assetsHeader.vue'
 import MktContent from '@/components/assets/assetsContent.vue'
 
+// const scrollDirection = ref(null);
+// const handleScroll = (event) => {
+//   if(event) {
+//     console.log(event)
+//   }
+//   // const deltaY = event.deltaY;  
+//   // if (deltaY < 0) {  
+//   //   scrollDirection.value = 'up'; // 向上滚动  
+//   // } else if (deltaY > 0) {  
+//   //   scrollDirection.value = 'down'; // 向下滚动  
+//   // }  
+// }
 
+// const handleScroll = () => {
+// var scrollTop =
+// document.documentElement.scrollTop || document.body.scrollTop; //变量windowHeight是可视区的高度
+// var windowHeight =
+// document.documentElement.clientHeight || document.body.clientHeight; //变量scrollHeight是滚动条的总高度
+// var scrollHeight =
+// document.documentElement.scrollHeight || document.body.scrollHeight;
+// if (scrollTop + windowHeight == scrollHeight) {
+// //请求数据接口
+// // this.seeMoreSchoolList();
+// console.log('scrollTop + windowHeight == scrollHeight',scrollTop, windowHeight, scrollHeight)
+// return false;
+// }
+// }
 
-
+onMounted(() => {
+  // handleScroll()
+  // window.addEventListener("scroll", handleScroll, true);
+})
 </script>
 
 <style lang="scss" scoped>
 .market {
   background: #16141b;
+  .header {
+    width: 100%;
+    height: 480px;
+    background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
+    background-size: 100%;
+    // background: #fff;
+  }
 }
 </style>

src/views/MarketplaceView.vue

@@ -48,15 +48,15 @@ onUnmounted(() => {
 <style lang="scss" scoped>
 .market {
   width: 100%;
-  // background:#16141b;
   .header {
     height: 480px;
     background: url('@/assets/img/marketplace/rolesbg.png') no-repeat;
-    background-size: 100% 100
+    background-size: 100%;
   }
   .content {
     // position: relative;
     // top: -100px;
+    // margin-top: -140px;
   }
 }
 </style>