个人房源列表

src/components/biserialListItem/biserialListItem.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="list-item">
+    <div class="list-item" ref="list">
         <div class="authentication-box dis-f al-item" v-if="data && data.verified == 1">
             <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
             <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
@@ -9,13 +9,13 @@
             <div class="title-text">
                 {{ data && data.subject || '暂无标题' }}
             </div>
-            <div class="mg-t-10 dis-f al-item jus-bet s-w-100">
+            <div class="mg-t-10 dis-f al-item-start jus-bet s-w-100">
                 <div>
                     <div class="dis-f al-item">
                         <div class="tab-item first-tab">
                             {{ data && data.gptype || '' }}
                         </div>
-                        <div class="tab-item mg-l-8">
+                        <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.type[data && data.type]">
                             {{ listData && listData.data && listData.data.type[data && data.type] || '' }}
                         </div>
                         <div class="tab-item mg-l-8" v-if="data && data.elevator !== -1">
@@ -24,7 +24,7 @@
                         <div class="tab-item mg-l-8" v-if="data && data.sunshinearea !== -1">
                             {{ listData && listData.data && listData.data.sunshinearea[data && data.sunshinearea] || '' }}
                         </div>
-                        <div class="tab-item mg-l-8">
+                        <div class="tab-item mg-l-8" v-if="listData && listData.data && listData.data.gender[data && data.gender]">
                             {{ listData && listData.data && listData.data.gender[data && data.gender] || '' }}
                         </div>
                     </div>
@@ -38,42 +38,62 @@
                         <span class="unit">HK$</span>
                         <span class="price">{{ data && data.rent }}</span>
                         <span>/月</span>
-                        <span class="time" v-show="data&&data.rentalduration!=0">[ 租期{{ data&&data.rentalduration }}{{ data&&data.rentalperiod }} ]</span>
+                        <span class="time" v-show="data && data.rentalduration != 0">[ 租期{{ data && data.rentalduration }}{{
+                            data && data.rentalperiod }} ]</span>
                     </div>
                 </div>
                 <div class="img">
-                    <img :src="data&&data.ispic?data&&data.imageurl:data&&data.isvideo?data&&data.imageurl:''" class="img " alt="">
+                    <div>
+                        <img :src="data && data.ispic ? data && data.imageurl : data && data.isvideo ? data && data.imageurl : ''"
+                            @load="loadFinish" class="img " alt="">
                         <div class="s-img dis-f jus-x al-item" v-if="data && data.isvideo">
                             <img src="../../assets/homeImage/videoIcon.svg" class="img" alt="">
                         </div>
-                    
+                    </div>
                 </div>
             </div>
             <img src="../../assets/homeImage/corner.svg" class="tab-img" v-if="routePath === '/personHousing'" alt="">
-            <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath==='/intermediaryHousing'" class="tab-img" alt="">
+            <img src="../../assets/homeImage/intermediaryCorner.svg" v-if="routePath === '/intermediaryHousing'"
+                class="tab-img" alt="">
         </div>
         <div class="btm-box dis-f al-item">
             <img :src="data && data.avatar" class="user-img" alt="">
             <span class="user-name">{{ data && data.author }}</span>
-            <div class="btn" v-if="data&&data.isintermediary !== 1&&!data.intermediary_text">{{ listData&&listData.data&&listData.data.intermediary[data&&data.intermediary] }}</div>
+            <div class="btn" v-if="data && data.isintermediary !== 1 && !data.intermediary_text">{{
-            <div class="btn" v-if="data&&data.isintermediary !== 1&&data.intermediary_text">{{ data&&data.intermediary_text }}</div>
+                listData && listData.data && listData.data.intermediary[data && data.intermediary] }}</div>
-            <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data&&data.isintermediary == 1" class="intermediary-tab-img" alt="">
+            <div class="btn" v-if="data && data.isintermediary !== 1 && data.intermediary_text">{{ data && data.intermediary_text
+            }}</div>
+            <img src="../../assets/homeImage/intermediaryTabImg.png" v-if="data && data.isintermediary == 1"
+                class="intermediary-tab-img" alt="">
         </div>
     </div>
 </template>
   
 <script setup>
-import { ref ,defineProps,reactive} from "vue";
+import { ref, defineProps, reactive,onMounted,getCurrentInstance } from "vue";
 import { useRoute, useRouter } from 'vue-router';
 import store from '../../store/index';
 let props = defineProps({
     item: {
         type: Object
+    },
+    imgLoad: {
+        type: Function
+    },
+    listId:{
+        type:[String,Number]
     }
 })
 let data = {}
 data = props.item
 
+let listId=props.listId
+let imgRef = null
+let loadFinish=()=>{
+    let height=imgRef.ctx.$refs.list.offsetHeight
+    props.imgLoad(data.id,listId,height)
+}
+
 //监听路由
 const route = useRoute()
 let routePath = ref('')
@@ -86,7 +106,10 @@ location.data=store.state.indexData&&store.state.indexData.config&&store.state.i
 //数据包
 let listData = reactive({ data: {} })
 listData.data = store.state.indexData && store.state.indexData.config
-console.log(listData.data)
+
+onMounted(()=>{
+    imgRef = getCurrentInstance()
+})
 
 </script>
 <style scoped>
@@ -105,6 +128,9 @@ img {
 .jus-bet {
     justify-content: space-between;
 }
+.al-item-start{
+    align-items: flex-start;
+}
 
 .al-item {
     align-items: center;
@@ -164,7 +190,6 @@ img {
 
     .img {
         width: 100px;
-        /* height: 100px; */
         object-fit: cover;
         border-radius: 10px;
         position: relative;
@@ -178,6 +203,7 @@ img {
         top: 0;
         left: 0;
         background: rgba(51, 51, 51, 0.733333333333333);
+
         .img {
             width: 30px;
             height: 30px;
@@ -203,10 +229,6 @@ img {
             font-size: 18px;
             color: #000000;
             text-align: left;
-            overflow: hidden;
-            display: -webkit-box;
-            -webkit-line-clamp: 2;
-            -webkit-box-orient: vertical;
         }
 
         .mg-l-8 {
@@ -330,8 +352,7 @@ img {
             text-align: center;
         }
     }
-}
+}</style>
-</style>
 
 
   

src/views/housingView/person.vue

@@ -5,11 +5,11 @@
         <div class="dis-f jus-x al-item">
             <div class="body-maxWidth mg-t-35">
                 <div class="dis-f jus-bet">
-                    <div>
+                    <div ref="list">
-                        <biserialItem v-for="(item,i) in dataList.data.data" :key="i" :item="item"></biserialItem>
+                        <biserialItem v-for="(item,i) in pageList[1]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="1"></biserialItem>
                     </div>
                     <div>
-                        <biserialItem></biserialItem>
+                        <biserialItem v-for="(item,i) in pageList[2]" :key="i" :item="item" :imgLoad="watchImgLoad" listId="2"></biserialItem>
                     </div>
                 </div>
             </div>
@@ -19,26 +19,61 @@
 </template>
   
 <script setup>
-import {reactive} from 'vue'
+import {reactive,onMounted,ref} from 'vue'
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
 import listBtmPrompt from "../../components/public/have-questions.vue";
 import api from "../../utils/api";
-
 //获取数据
+let pages=ref(1)
 let dataList= reactive({data:[],count:0})
+let pageList=reactive({1:[],2:[],height1:0,height2:0,tab:2})
 let getDataList=()=>{
-    let postData={}
+    let postData={
+        page:pages.value
+    }
     api.getLists(postData).then(res=>{
         console.log(res.data)
         if(res.code===200){
             dataList.count=res.data.count
             dataList.data=res.data
+            console.log(dataList.data)
+            pageList[1].push(dataList.data.data[0])
+            pageList[2].push(dataList.data.data[1])
         }
     })
 }
+
+//添加数据
+let addListData=()=>{
+    let num=null
+    if(pageList.tab>=19)return
+    ++pageList.tab
+    console.log(pageList.height1,pageList.height2)
+   if(pageList.height1>pageList.height2){
+        num=2
+    }else{
+        num=1
+    }
+    pageList[num].push(dataList.data.data[pageList.tab])
+}
+
+//监听图片加载
+let watchImgLoad=(id,listId,height)=>{ 
+    console.log(listId,height)
+    pageList[`height${listId}`]+=height
+    // console.log(pageList)
+    addListData()
+}
+
+
+
+//listImg
+onMounted(()=>{
     getDataList()
+})
+
 </script>
 <style scoped>
 img {