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-31 11:42:24 +08:00
parent a6eb45baed
commit 6793e4cd3e
9 changed files with 196 additions and 343 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/views/seachIndex.vue
View File

@@ -4,18 +4,12 @@
<inputModule :getDataList="setSeachSelectData" :count="dataCount" ref="inputModuleInfo"></inputModule>
<div class="dis-f jus-x al-item">
<div class="body-maxWidth mg-t-35">
<div class="dis-f jus-bet"
v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''">
<div ref="list">
<biserialItem v-for="(item, i) in pageList['1']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="1"></biserialItem>
</div>
<div>
<biserialItem v-for="(item, i) in pageList['2']" :key="i" :item="item" :imgLoad="watchImgLoad"
listId="2"></biserialItem>
</div>
<div class="body-maxWidth"
v-show="dataList.data && dataList.data.length > 0 && seachSelectData.data.tabType !== 'apartment' && seachSelectData.data.intermediary !== ''"
ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
<div class="body-maxWidth" v-show="seachSelectData.data && seachSelectData.data.tabType === 'apartment' && dataList.data && dataList.data.length > 0"
ref="gridContainer">
<apartment-item v-for="item in listApartment" :item="item"></apartment-item>
</div>
@@ -56,12 +50,14 @@ let routeQuery = reactive({ data: {} })
let pages = ref(1)//页数
let dataList = reactive({ data: [], count: 0 })//个人/中介数据
let dataCount = ref(0)//数据数量
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let pageList = ref([])
// let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })//双列瀑布数据
let seachSelectData = reactive({ data: {} })//搜索数据
let loading = ref(true)//开关
let loadingText = ref(` 加载中..... `)
let listApartment = ref([])//公寓数据
let masonryInstance = null//瀑布实例
let listMasonryInstance = null
provide('count', dataCount)
//保存搜索设置
@@ -110,19 +106,26 @@ let getDataList = (data) => {
dataList.data = res.data.data
if (res.data.data.length < 20) {
loadingText.value = ` 到底了 `
loading.value = false
} else {
loadingText.value = ' 加载中... '
loading.value = true
}
if (seachSelectData.data.tabType !== 'apartment') {
if (pages.value === 1) {
setInitial()
pageList.value = []
}
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
pageList.value = pageList.value.concat(dataList.data)
nextTick(() => {
if (dataList.data[0]) pageList['1'].push(dataList.data[0])
if (dataList.data[1]) pageList['2'].push(dataList.data[1])
// if (dataList.data[0]) pageList['1'].push(dataList.data[0])
// if (dataList.data[1]) pageList['2'].push(dataList.data[1])
console.log('listMasonryInstance',listMasonryInstance)
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
})
} else {
let data = res.data
@@ -135,7 +138,7 @@ let getDataList = (data) => {
masonryInstance.reloadItems();
masonryInstance.layout();
if (res.data.data.length >= 20) {
console.log(123)
// console.log(123)
loading.value = true
}
})
@@ -191,8 +194,14 @@ let downLoadMore = () => {
let inputModuleInfo = ref(null)
const gridContainer = ref(null);
const list = ref(null)
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition:true
});
masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item',
gutter: 20