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

67
src/views/housingView/intermediary.vue
View File

@@ -3,16 +3,9 @@
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<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">
<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 mg-t-35" >
<div v-show="dataList.data && dataList.data.length > 0" ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
@@ -44,12 +37,15 @@ import { ElMessage } from 'element-plus'
import footerTool from '@/components/footer/footer.vue'
import loadMoreText from '../../components/loadMore/loadMoreText.vue'
import backToTop from '@/components/public/backToTop.vue'
import Masonry from 'masonry-layout';
//瀑布实例
let listMasonryInstance = null
//获取数据
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 seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 加载中... ')
@@ -65,14 +61,6 @@ let setSeachSelectData = (data) => {
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
if(!loading.value)return
@@ -92,14 +80,16 @@ let getDataList = (data) => {
loadingText.value=' 加载中... '
}
if (pages.value === 1) {
setInitial()
pageList.value = []
}
pageList.value = pageList.value.concat(res.data.data)
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
if(dataList.data[0])pageList['1'].push(dataList.data[0])
if(dataList.data[1])pageList['2'].push(dataList.data[1])
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
if (dataList.data.length >= 20) loading.value = true
})
} else {
ElMessage({
@@ -110,32 +100,6 @@ let getDataList = (data) => {
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
if(dataList.data.length>=20){
loading.value = true
}else{
loading.value = false
}
return
}
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
@@ -145,8 +109,15 @@ let downLoadMore = () => {
})
}
let list = ref('')
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition: true
});
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})

69
src/views/housingView/needHousing.vue
View File

@@ -3,16 +3,9 @@
<pageTopBar></pageTopBar>
<seachModule :count="dataList.count" :getDataList="setSeachSelectData"></seachModule>
<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">
<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 mg-t-35" >
<div v-show="dataList.data && dataList.data.length > 0" ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
@@ -44,12 +37,16 @@ import { ElMessage } from 'element-plus'
import footerTool from '@/components/footer/footer.vue'
import loadMoreText from '../../components/loadMore/loadMoreText.vue'
import backToTop from '@/components/public/backToTop.vue'
import Masonry from 'masonry-layout';
//瀑布实例
let listMasonryInstance = null
//获取数据
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 seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText=ref(' 加载中... ')
@@ -65,14 +62,6 @@ let setSeachSelectData = (data) => {
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
if(!loading.value)return
@@ -92,14 +81,16 @@ let getDataList = (data) => {
loadingText.value=' 加载中... '
}
if (pages.value === 1) {
setInitial()
pageList.value = []
}
pageList.value = pageList.value.concat(res.data.data)
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
if(dataList.data[0])pageList['1'].push(dataList.data[0])
if(dataList.data[1])pageList['2'].push(dataList.data[1])
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
if (dataList.data.length >= 20) loading.value = true
})
} else {
ElMessage({
@@ -110,33 +101,6 @@ let getDataList = (data) => {
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab > (dataList.count>20?dataList.data.length-2:dataList.count-2)) {
console.log(dataList.data.length,20,loading.value)
if(dataList.data.length>=20){
loading.value = true
}else{
loading.value = false
}
return
}
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
tool.loadMore(() => {
@@ -146,8 +110,15 @@ let downLoadMore = () => {
})
}
let list = ref('')
//listImg
onMounted(() => {
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition: true
});
getDataList()
window.addEventListener('scroll', downLoadMore, true);
})

95
src/views/housingView/person.vue
View File

@@ -4,15 +4,8 @@
<seachModule :getDataList="setSeachSelectData"></seachModule>
<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">
<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 v-show="dataList.data && dataList.data.length > 0" ref="list">
<biserialItem v-for="(item, i) in pageList" :key="i" :item="item"></biserialItem>
</div>
<div class="dis-f jus-x no-list-box al-item" v-show="dataList.data && dataList.data.length === 0">
<noList></noList>
@@ -28,7 +21,6 @@
<circle-btn></circle-btn>
<back-to-top></back-to-top>
</template>
<script setup>
@@ -46,16 +38,19 @@ import { ElMessage } from 'element-plus'
import footerTool from '@/components/footer/footer.vue'
import loadMoreText from '../../components/loadMore/loadMoreText.vue'
import backToTop from '@/components/public/backToTop.vue'
import Masonry from 'masonry-layout';
//路由
const router = useRouter()
//瀑布实例
let listMasonryInstance = null
//获取数据
let pages = ref(1)
let dataList = reactive({ data: [], count: 0 })
let dataList = reactive({ data: [], count: null })
let dataCount = ref(0)
let pageList = reactive({ 1: [], 2: [], height1: 0, height2: 0, tab: 1 })
let pageList = ref([])
let seachSelectData = reactive({ data: {} })
let loading = ref(true)
let loadingText = ref(' 加载中... ')
@@ -72,14 +67,6 @@ let setSeachSelectData = (data) => {
getDataList(seachSelectData.data)
}
//初始化列表参数
let setInitial = () => {
pageList[1] = []
pageList[2] = []
pageList.height1 = 0
pageList.height2 = 0
}
//获取搜索数据
let getDataList = (data) => {
if (!loading.value) return
@@ -92,20 +79,22 @@ let getDataList = (data) => {
api.getLists(postData).then(res => {
if (res.code === 200) {
dataList.data = res.data.data
if(res.data.data.length<20){
loadingText.value=' 到底了 '
}else{
loadingText.value=' 加载中... '
if (res.data.data.length < 20) {
loadingText.value = ' 到底了 '
} else {
loadingText.value = ' 加载中... '
}
if (pages.value === 1) {
setInitial()
pageList.value = []
}
pageList.value = pageList.value.concat(res.data.data)
pageList.tab = 1
dataList.count = res.data.count
dataCount.value = res.data.count
nextTick(() => {
if (dataList.data[0]) pageList['1'].push(dataList.data[0])
if (dataList.data[1]) pageList['2'].push(dataList.data[1])
listMasonryInstance.reloadItems();
listMasonryInstance.layout();
if (dataList.data.length >= 20) loading.value = true
})
} else {
ElMessage({
@@ -116,31 +105,6 @@ let getDataList = (data) => {
})
}
//添加数据
let addListData = () => {
let num = null
if (pageList.tab > (dataList.count > 20 ? dataList.data.length - 2 : dataList.count - 2)) {
if (dataList.data.length >= 20) {
loading.value = true
} else {
loading.value = false
}
return
}
pageList.tab++
if (pageList.height1 > pageList.height2) {
num = 2
} else {
num = 1
}
pageList[num].push(dataList.data[pageList.tab])
}
//监听图片加载
let watchImgLoad = (id, listId, height) => {
pageList[`height${listId}`] += height
addListData()
}
//加载更多
let downLoadMore = () => {
@@ -151,18 +115,25 @@ let downLoadMore = () => {
})
}
let list = ref(null)
//listImg
onMounted(() => {
let {type,data}=router.currentRoute.value.query
let typeData = null
if (data) typeData = JSON.parse(data)
if (data && Object.keys(data).length > 0) {
if (type !== 'location') {
seachSelectData.data = { [type]: typeData.id }
} else {
seachSelectData.data = { [type]: typeData }
}
}
listMasonryInstance = new Masonry(list.value, {
itemSelector: '.item',
gutter: 20,
percentPosition: true
});
// let { type, data } = router.currentRoute.value.query
// let typeData = null
// if (data) typeData = JSON.parse(data)
// if (data && Object.keys(data).length > 0) {
// if (type !== 'location') {
// seachSelectData.data = { [type]: typeData.id }
// } else {
// seachSelectData.data = { [type]: typeData }
// }
// }
getDataList(seachSelectData.data)
window.addEventListener('scroll', downLoadMore, true);
})