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

首页轮播图加判断渲染图片，首页瀑布流广告图片加加载后再修改瀑布流

Browse Source
This commit is contained in:
A1300399510
2024-09-29 14:25:15 +08:00
parent 89b261b0bb
commit 7fdd7434af
46 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/pageTopBar/pageTopBar.vue
View File

@@ -40,10 +40,10 @@
<!-- <div class="dis-f jus-x al-item" style="margin-top:20px;" v-if="bannerLists.data.length"> -->
<div class="dis-f jus-x al-item" v-if="bannerLists.data.length">
<div class="body-maxWidth">
<el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;">
<el-carousel-item v-for="item in bannerLists.data" :key="item.feedId">
<el-carousel :interval="5000" arrow="always" height="330" style="height: 330px;" @change="carouselChange">
<el-carousel-item v-for="(item, i) in bannerLists.data" :key="item.feedId">
<div style="width: 100%; height: 100%;" class="dis-f jus-x al-item">
<img class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
<img v-if="i >= carouselIndex - 1 && i <= carouselIndex + 1" class="carousel-img" :src="item.imageurl" alt="" :title="item.title" @click="openInfo(item)" />
</div>
</el-carousel-item>
</el-carousel>
@@ -53,9 +53,7 @@
<div class="body-maxWidth dis-f" style="height: 40px;">
<div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': item.path === tabBtnType }" v-for="(item, i) in seachTab.data" :key="i" @click="changeTabBtnType(item)">
<el-badge v-if="item['path'] == '/user' && user.data['messagenum'] != 0" :value="user.data['messagenum']">
<div style="padding: 0 10px;">
{{ item.name }}
</div>
<div style="padding: 0 10px;">{{ item.name }}</div>
</el-badge>
<div v-else>{{ item.name }}</div>
</div>
@@ -160,13 +158,19 @@ const loginBtn = type => {
const goIndex = () => router.push("/")
watchEffect(() => {
if (routePath.value == "/needHousing") bannerLists.data = store.state.bannerData.needHousing || []
if (routePath.value == "/needHousing") bannerLists.data = store.state.bannerData.needHousing || []
else if (routePath.value == "/intermediaryHousing") bannerLists.data = store.state.bannerData.intermediaryHousing || []
else if (routePath.value == "/personHousing") bannerLists.data = store.state.bannerData.personHousing || []
else if (routePath.value == "/apartment") bannerLists.data = store.state.bannerData.apartment || []
else if (routePath.value == "/") bannerLists.data = store.state.bannerData.home || []
})
let carouselIndex = ref(0) // 轮播图的索引
const carouselChange = value => {
console.log("value", value)
carouselIndex.value = value
}
</script>
<style lang="less" scoped>
.pos-r {