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

首页数据布置到全局 瀑布流加载更多

Browse Source
This commit is contained in:
luJianJun
2023-07-13 15:07:31 +08:00
parent c8f24835d3
commit f5e9e2ec62
7 changed files with 189 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
src/views/HomeView.vue
View File

@@ -3,7 +3,7 @@
<pageTopBar :tabMens="indexData.data"></pageTopBar>
<!-- <headerNavigation></headerNavigation> -->
<!-- 搜索模块 -->
<seachModule :list="seachTypeData.data"></seachModule>
<seachModule :list="seachTypeData.data" :hotList="indexData.data.hotSearcheWords"></seachModule>
<!-- 房源展示 -->
<div class="dis-f jus-x al-item" style="margin-top:25px;">
<div class="body-maxWidth dis-f al-item">
@@ -51,28 +51,22 @@
<img src="../assets/homeImage/informationWx.svg" class="information-wx-img" alt="">
</div>
</div>
<div class="information-right-box dis-f jus-bet">
<div class="dis-f jus-bet al-item">
<div class="img-box pos-r">
<img src="../assets/homeImage/informationRightBoxFirst.svg" class="img-box" alt="">
<div class="information-right-box dis-f jus-bet"
v-if="indexData.data.operationNumber && indexData.data.operationNumber.length">
<div class="dis-f jus-bet al-item" style="flex-wrap: wrap;">
<div class="img-box pos-r" v-for="(item, i) in indexData.data.operationNumber" :key="i"
:style="{ 'margin-top': i > 1 ? '19px' : 0 }">
<img :src="item.image" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/firstCode.png" class="img" alt="">
<img :src="item.qrcode" class="img" alt="">
<div>
微信扫码关注
</div>
</div>
</div>
<div class="img-box pos-r">
<img src="../assets/homeImage/informationRightBoxSecond.svg" class="img-box" alt="">
<div class="img-list">
<img src="../assets/homeImage/secondCode.png" class="img" alt="">
<div>
微信扫码关注
{{ item.name }}
</div>
</div>
</div>
</div>
<div class="dis-f jus-bet al-item">
<!-- <div class="dis-f jus-bet al-item">
<div class="img-box pos-r">
<img src="../assets/homeImage/informationRightBoxThird.svg" class="img-box" alt="">
<div class="img-list">
@@ -91,15 +85,14 @@
</div>
</div>
</div>
</div>
</div> -->
</div>
</div>
</div>
<!-- 瀑布流 -->
<div class="dis-f jus-x">
<div class="body-maxWidth dis-f al-item" style="margin-top:50px;">
<div v-for="(item, i) in ListSelectBtn.data" :key="i" class="dis-f al-item"
@click="ListSelectBtn.selectType = item.recommend">
<div v-for="(item, i) in ListSelectBtn.data" :key="i" class="dis-f al-item" @click="listDataTypeChange(item)">
<div class="list-tab-btn" :class="{ 'click-tab-btn': ListSelectBtn.selectType === item.type }">
<div style="z-index: 666;position: relative;">
{{ item.name }}
@@ -149,23 +142,23 @@
</div>
</div>
</div>
<indexWaterfallBox v-for="(item,i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
<indexWaterfallBox v-for="(item, i) in waterfallList['1']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
<div>
<div ref="waterfall2">
<indexWaterfallBox v-for="(item,i) in waterfallList['2']" :data="item" :key="i"></indexWaterfallBox>
<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">
<indexWaterfallBox v-for="(item,i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
<indexWaterfallBox v-for="(item, i) in waterfallList['3']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
<div>
<div ref="waterfall4">
<indexWaterfallBox v-for="(item,i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
<indexWaterfallBox v-for="(item, i) in waterfallList['4']" :data="item" :key="i"></indexWaterfallBox>
</div>
</div>
</div>
@@ -179,13 +172,14 @@
</template>
<script setup>
import { reactive, ref, getCurrentInstance, onMounted, nextTick } from "vue";
import { reactive, ref, getCurrentInstance, onMounted, nextTick, onBeforeUnmount, watchEffect } from "vue";
import listItem from "../components/apartmentList/apartmentList.vue";
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 headerNavigation from '../components/public/head.vue'
import store from '../store/index';
import api from "../utils/api";
//
@@ -197,12 +191,17 @@ let ListSelectBtn = reactive({ data: [], selectType: 'recommend' })
//首页数据
let indexData = reactive({ data: {} })
let seachTypeData = reactive({ data: [] })
api.index().then(res => {
if (res.code === 200) {
seachTypeData.data = res.data.combination
indexData.data = res.data
ListSelectBtn.data = res.data.recommendedTab
}
// api.index().then(res => {
// if (res.code === 200) {
// seachTypeData.data = res.data.combination
// indexData.data = res.data
// ListSelectBtn.data = res.data.recommendedTab
// }
// })
watchEffect(() => {
seachTypeData.data = store.state.seachTypeData
indexData.data = store.state.indexData
ListSelectBtn.data = store.state.recommendedTab
})
//公寓数据
@@ -213,18 +212,15 @@ api.getApartment().then(res => {
}
})
//获取实例
let currentInstance = null
onMounted(() => {
currentInstance = getCurrentInstance()
})
//瀑布流数据
let pages = ref(1)
let waterfallList = reactive({ 1: [], 2: [], 3: [], 4: [] })
//判断最小值
let getMinHeight = (data) => {
if (!currentInstance.ctx.$refs.waterfall1) return
let waterfallAll = [
currentInstance.ctx.$refs.waterfall1.offsetHeight,
currentInstance.ctx.$refs.waterfall2.offsetHeight,
@@ -233,31 +229,80 @@ let getMinHeight = (data) => {
]
let min = Math.min(waterfallAll[0], waterfallAll[1], waterfallAll[2], waterfallAll[3])
let index = waterfallAll.indexOf(min)
waterfallList[index+1].push(data)
waterfallList[index + 1].push(data)
// console.log(index,waterfallAll)
}
//瀑布流添加
let addListData = (data) => {
data.map((res) => {
setTimeout(()=>{
setTimeout(() => {
getMinHeight(res)
})
}, 500)
})
}
//开关
let loadMore = ref(true)
//瀑布流数据
let getRecommendList = () => {
api.recommendList({
page: pages,
limit: 30,
type: ListSelectBtn.selectType
}).then(res => {
console.log(res)
if (res.code === 200) {
if (res.data.pagevalue) addListData(res.data.data)
if (res.data.data.length >= 30) {
loadMore.value = true
} else {
loadMore.value = false
}
}
})
console.log(waterfallList)
}
api.recommendList({
page: pages,
limit: 30,
type: ListSelectBtn.selectType
}).then(res => {
console.log(res)
if (res.code === 200) {
addListData(res.data.data)
//标签切换
let listDataTypeChange = (item) => {
ListSelectBtn.selectType = item.type
waterfallList[1] = []
waterfallList[2] = []
waterfallList[3] = []
waterfallList[4] = []
getRecommendList()
}
//监听滚动条
const onPageSrcoll = (e) => {
let body = document.documentElement ? document.documentElement : document.body ?
document.body :
document.querySelector('.element');
let scrollTop = body.scrollTop
let clientHeight = body.clientHeight
let offsetHeight = body.offsetHeight
if (scrollTop + clientHeight > offsetHeight - 500) {
if (loadMore.value) {
loadMore.value = false
pages.value += 1
getRecommendList()
}
}
}
onMounted(() => {
currentInstance = getCurrentInstance()
setTimeout(() => {
getRecommendList()
}, 1000)
nextTick(() => {
window.addEventListener('scroll', onPageSrcoll, true);
})
})
onBeforeUnmount(() => {
window.removeEventListener('scroll', onPageSrcoll);
})
</script>
@@ -364,6 +409,7 @@ img {
.list-li {
margin-top: 20px;
cursor: pointer;
}
.list-mark {