首页轮播图加判断渲染图片，首页瀑布流广告图片加加载后再修改瀑布流

src/components/indexWaterfallBox/indexWaterfallBox.vue

@@ -88,7 +88,7 @@
 
         <!-- 广告 -->
     </div>
-    <img :src="itemData.imageLocal || itemData.image" :class="{ 'no-click': !itemData.path && !itemData.url }" class="live-img item" v-if="itemData.type === 'adv'" alt="" @click="watchAdv" />
+    <img :src="itemData.imageLocal || itemData.image" :class="{ 'no-click': !itemData.path && !itemData.url }" class="live-img item" v-if="itemData.type === 'adv'" alt="" @click="watchAdv" @load="imgload" />
 </template>
 
 <script setup>
@@ -102,7 +102,16 @@ const props = defineProps({
             return {}
         },
     },
+    listMasonryInstance: {
+        type: Object,
+    },
 })
+
+const imgload = () => {
+    props.listMasonryInstance.reloadItems();
+    props.listMasonryInstance.layout();
+}
+
 let itemData = props.data
 let location = reactive({ data: {} })
 location.data = store.state.indexData.config.location
@@ -293,7 +302,6 @@ watchEffect(() => {
         display: -webkit-box;
         line-height: 28px;
 
-
         .type {
             width: 34px;
             height: 20px;
@@ -445,7 +453,8 @@ watchEffect(() => {
 .live-img {
     width: 285px;
     /* height: 349px; */
-    min-height: 370px;
+    /* min-height: 370px; */
+    min-height: 193px;
     border-radius: 16px;
     margin-bottom: 20px;
     cursor: pointer;

src/components/pageTopBar/pageTopBar.vue

@@ -40,10 +40,10 @@
             <!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
             <div class="dis-f jus-x al-item" v-if="bannerLists.data.length">
                 <div class="body-maxWidth">
-                    <el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;">
-                        <el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
+                    <el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;" @change="carouselChange">
+                        <el-carousel-item v-for="(item, i) in bannerLists.data" :key="item.feedId">
                             <div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
-                                <img class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
+                                <img v-if="i >= carouselIndex - 1 && i <= carouselIndex + 1" class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
                             </div>
                         </el-carousel-item>
                     </el-carousel>
@@ -53,9 +53,7 @@
                 <div class="body-maxWidth dis-f" style="height: 40px;">
                     <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }" v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
                         <el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']">
-                            <div style="padding: 0 10px;">
-                                {{ item.name }}
-                            </div>
+                            <div style="padding: 0 10px;">{{ item.name }}</div>
                         </el-badge>
                         <div v-else>{{ item.name }}</div>
                     </div>
@@ -160,13 +158,19 @@ const loginBtn = type => {
 const goIndex = () => router.push("/")
 
 watchEffect(() => {
-    if (routePath.value == "/needHousing")  bannerLists.data = store.state.bannerData.needHousing || []
+    if (routePath.value == "/needHousing") bannerLists.data = store.state.bannerData.needHousing || []
     else if (routePath.value == "/intermediaryHousing") bannerLists.data = store.state.bannerData.intermediaryHousing || []
     else if (routePath.value == "/personHousing") bannerLists.data = store.state.bannerData.personHousing || []
     else if (routePath.value == "/apartment") bannerLists.data = store.state.bannerData.apartment || []
     else if (routePath.value == "/") bannerLists.data = store.state.bannerData.home || []
-    
 })
+
+let carouselIndex = ref(0) // 轮播图的索引
+
+const carouselChange = value => {
+    console.log("value", value)
+    carouselIndex.value = value
+}
 </script>
 <style lang="less" scoped>
 .pos-r {

src/router/index.js

@@ -139,7 +139,9 @@ router.beforeEach((to, from, next) => {
   //随机增加进度
   NProgress.inc();
 
+
   next()
+
   let meta = to['meta'] || {}
   let title = meta['title']
   if (title) setSeoTitle(title)

src/views/HomeView.vue

@@ -137,7 +137,7 @@
               </div>
             </div>
           </div>
-          <indexWaterfallBox v-for="(item, i) in waterfallList" :data="item" :key="i"></indexWaterfallBox>
+          <indexWaterfallBox v-for="(item, i) in waterfallList" :data="item" :key="i" :listMasonryInstance="listMasonryInstance"></indexWaterfallBox>
         </div>
       </div>
     </div>
@@ -243,9 +243,10 @@ let loadText = ref('下拉加载更多')
 //瀑布流数据
 let getRecommendList = () => {
   loadText.value = '加载中.....'
+  const limit  = 30
   api.recommendList({
     page: pages.value,
-    limit: 30,
+    limit,
     type: ListSelectBtn.selectType,
     pagevalue: pagevalue.value
   }).then(res => {
@@ -257,7 +258,7 @@ let getRecommendList = () => {
         pagevalue.value = res.data.pagevalue
       }
 
-      if (res.data.data.length >= 30) {
+      if (res.data.data.length >= limit) {
         loadMore.value = true
         loadText.value = '下拉加载更多'
       } else {
@@ -265,7 +266,6 @@ let getRecommendList = () => {
         loadText.value = '到底了'
       }
       nextTick(() => {
-
         listMasonryInstance.reloadItems();
         listMasonryInstance.layout();