首页骨架 css样式

src/views/HomeView.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="home">
-    <pageTopBar></pageTopBar>
+    <pageTopBar :bannerList="bannerList.data"></pageTopBar>
     <!-- <headerNavigation></headerNavigation> -->
     <!-- 搜索模块 -->
     <seachModule></seachModule>
@@ -107,7 +107,10 @@
       <div class="body-maxWidth dis-f al-item">
         <div class="waterfall-box s-w-100">
           <div>
-            <div ref="waterfall1">
+            <div v-show="waterfallList['1'].length===0">
+              <skeletonBox v-show="waterfallList['1'].length===0" v-for="item in noWaterfallList['1']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall1" v-show="waterfallList['1'].length>0">
               <div class="waterfall-first-box dis-f">
                 <div class="info-box dis-f jus-x al-item first" @click="indexWaterfallBoxCheck(indexData.data.tabs[0])">
                   <div>
@@ -142,22 +145,32 @@
                   </div>
                 </div>
               </div>
+              <!-- 骨架屏 -->
               <indexWaterfallBox v-for="(item, i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
           <div>
-            <div ref="waterfall2">
+            <div v-show="waterfallList['2'].length===0">
+              <skeletonBox v-show="waterfallList['2'].length===0" v-for="item in noWaterfallList['2']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall2" v-show="waterfallList['2'].length>0">
               <indexWaterfallBox v-for="(item, i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
             </div>
             <!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
           </div>
           <div>
-            <div ref="waterfall3">
+            <div v-show="waterfallList['3'].length===0">
+              <skeletonBox v-show="waterfallList['3'].length===0" v-for="item in noWaterfallList['3']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall3" v-show="waterfallList['3'].length>0">
               <indexWaterfallBox v-for="(item, i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
           <div>
-            <div ref="waterfall4">
+            <div v-show="waterfallList['4'].length===0">
+              <skeletonBox v-show="waterfallList['4'].length===0" v-for="item in noWaterfallList['4']" :key="item"></skeletonBox>
+            </div>
+            <div ref="waterfall4" v-show="waterfallList['4'].length>0">
               <indexWaterfallBox v-for="(item, i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
             </div>
           </div>
@@ -178,6 +191,7 @@ import pageTopBar from '../components/pageTopBar/pageTopBar.vue';
 import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
 import seachModule from "../components/seachModule/seachModule.vue";
 import indexRegularBox from '../components/indexRegularBox/indexRegularBox.vue';
+import skeletonBox from '../components/skeletonBox/skeletonBox.vue'
 import headerNavigation from '../components/public/head.vue';
 import { useRouter } from 'vue-router'
 import store from '../store/index';
@@ -230,9 +244,12 @@ api.getApartment().then(res => {
 
 //获取实例
 let currentInstance = null
+
+let pagevalue = ref(0)
 //瀑布流数据
 let pages = ref(1)
 let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
+let noWaterfallList=reactive({1:3,2:3,3:3,4:3})
 
 //判断最小值
 let getMinHeight = (data) => {
@@ -249,6 +266,16 @@ let getMinHeight = (data) => {
   // console.log(index,waterfallAll)
 }
 
+//轮播
+let bannerList = reactive({ data: [] })
+let banner = () => {
+  api.banner({ type: 'home' }).then(res => {
+    if (res.code === 200) {
+      bannerList.data = res.data
+    }
+  })
+}
+
 //瀑布流添加
 let addListData = (data) => {
   data.map((res) => {
@@ -264,11 +291,15 @@ let getRecommendList = () => {
   api.recommendList({
     page: pages.value,
     limit: 30,
-    type: ListSelectBtn.selectType
+    type: ListSelectBtn.selectType,
+    pagevalue: pagevalue.value
   }).then(res => {
     console.log(res)
     if (res.code === 200) {
-      if (res.data.pagevalue) addListData(res.data.data)
+      if (res.data.pagevalue) {
+        addListData(res.data.data)
+        pagevalue.value = res.data.pagevalue
+      }
       if (res.data.data.length >= 30) {
         loadMore.value = true
       } else {
@@ -287,6 +318,7 @@ let listDataTypeChange = (item) => {
   waterfallList[3] = []
   waterfallList[4] = []
   pages.value = 1
+  pagevalue.value = 0
   getRecommendList()
 }
 
@@ -322,12 +354,14 @@ onMounted(() => {
   currentInstance = getCurrentInstance()
   setTimeout(() => {
     getRecommendList()
+    banner()
     window.addEventListener('scroll', onPageSrcoll, true);
   }, 1000)
 })
 
 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', onPageSrcoll);
+  window.removeEventListener('scroll', onPageSrcoll, true);
+  console.log('卸载', window.scroll)
 })