XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

公寓列表瀑布流

Browse Source
This commit is contained in:
A1300399510
2023-07-17 11:50:19 +08:00
parent 5760d0890b
commit cb3198febc
4 changed files with 270 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/housingView/apartment.vue
View File

@@ -2,35 +2,13 @@
<div>
<pageTopBar></pageTopBar>
<!-- <seachModule></seachModule> -->
<div class="list wid1200">
<div class="item flexflex">
<img class="img" src="https://axure-file.lanhuapp.com/md5__3b3872c54074c559daab0b82c0e0514a.svg">
<div class="title">iRent佐敦二期公寓</div>
<div class="hint">油尖旺中心地带的品质公寓</div>
<div class="tab-box flexflex">
<div class="tab-item flexcenter" v-for="item in 9">阳台</div>
</div>
<div class="location flexacenter">
<img class="location-icon" src="@/assets/img/publicImage/location-icon.png">油尖旺区爱景街8号
</div>
<div class="type-list">
<div class="type-item flexacenter">
<div class="type-name flex1">单人间</div>
<div class="type-data flexacenter">
<div class="unit">HK$</div>
<div class="price">7800</div>
/月
</div>
</div>
</div>
<div class=""></div>
</div>
<div class="list wid1200 flexflex" ref="gridContainer">
<apartment-item v-for="item in list" :item="item"></apartment-item>
</div>
<!-- <div ref="gridContainer">
<div v-for="item in items" :key="item.id" ref="gridItem" class="grid-item">{{ item.text }}</div>
</div> -->
<have-questions></have-questions>
<page-footer></page-footer>
</div>
</template>
@@ -39,124 +17,98 @@
import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
import seachModule from "../../components/seachModule/seachModule.vue";
import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
import { ref, onMounted, watch } from 'vue';
import apartmentItem from '@/components/public/apartment-item.vue';
import haveQuestions from '@/components/public/have-questions.vue'
import pageFooter from '@/components/footer/footer.vue'
import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
import { ElLoading } from 'element-plus'
import Masonry from 'masonry-layout';
const gridContainer = ref(null);
const gridItem = ref([]);
const { proxy } = getCurrentInstance()
const items = [
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
{ id: 4, text: 'Item 3' },
{ id: 5, text: 'Item 3' },
{ id: 6, text: 'Item 3' },
{ id: 7, text: 'Item 3' },
{ id: 8, text: 'Item 3' },
{ id: 9, text: 'Item 3' },
{ id: 10, text: 'Item 3' },
{ id: 11, text: 'Item 3' },
{ id: 12, text: 'Item 3' },
// ...
];
const props = defineProps({
item: Object,
});
const gridContainer = ref(null);
let list = ref([])
let masonryInstance = null
onMounted(() => {
const masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.grid-item',
columnWidth: 200,
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item',
gutter: 10
});
watch(items, () => {
masonryInstance.reloadItems();
masonryInstance.layout();
});
getData()
window.addEventListener('scroll', handleScroll);
});
onUnmounted(() => {
window.removeEventListener('scroll', handleScroll);
});
let loading = ref(null) // 加载
let page = 1
const getData = () => {
if (page == 0) return
loading = ElLoading.service({
lock: true,
text: 'Loading',
background: 'rgba(0, 0, 0, 0.7)',
})
proxy.$post("/tenement/pc/api/apartment", {
page
}).then(res => {
if (res.code != 200) return
let data = res.data
list.value = list.value.concat(data.data)
page = data.page * data.limit >= data.count ? 0 : page + 1,
nextTick(() => {
masonryInstance.reloadItems();
masonryInstance.layout();
loading.close()
})
}).catch(err => {
loading.close()
})
}
const handleScroll = () => {
const scrollHeight = document.documentElement.scrollHeight;
const clientHeight = document.documentElement.clientHeight;
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop + clientHeight >= scrollHeight) {
// 进行滚动到底部时的操作
console.log('已滚动到底部');
// 执行其他操作...
getData()
}
};
</script>
<style lang="less" scoped>
.list {
margin: 0 auto;
background-color: antiquewhite;
flex-wrap: wrap;
justify-content: space-between;
.item {
&:after {
content: "";
height: 0;
width: 386px;
background-color: rgba(255, 255, 255, 1);
border-radius: 20px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
flex-direction: column;
padding: 10px;
.img {
width: 366px;
height: 244px;
border-radius: 10px;
margin-bottom: 19px;
// margin: 0 auto;
}
.title {
font-weight: 650;
font-size: 20px;
color: #000000;
margin-bottom: 10px;
}
.hint {
color: #AAAAAA;
font-size: 14px;
margin-bottom: 20px;
}
.tab-box {
flex-wrap: wrap;
margin-bottom: 14px;
.tab-item {
height: 28px;
background-color: rgba(224, 240, 255, 1);
border-radius: 5px;
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 13px;
color: #447EB3;
padding: 0 11px;
margin-right: 10px;
margin-bottom: 10px;
}
}
.location {
.location-icon {
width: 18px;
height: 18px;
margin-right: 2px;
}
font-size: 15px;
color: #555555;
}
.type-list {
width: 354px;
// height: 108px;
background: rgba(246, 246, 246, 1);
border-radius: 12px;
padding: 0 10px;
.type-item {
height: 54px;
}
}
}
}
.grid-item {
background-color: #eee;
padding: 10px;
}
</style>