1、把city.vue中的content内容封装到city-group.vue中
使用vant3中的标签
<van-index-bar :sticky="false" :index-list="indexList">
<van-index-anchor index="热门" />
<div class="list">
<template v-for="(city, index) in groupData.hotCities">
<div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
</template>
</div>
<template v-for="(group, index) in groupData.cities" :key="index">
<van-index-anchor :index="group.group" />
<template v-for="(city, indey) in group.cities" :key="indey">
<van-cell :title="city.cityName" @click="cityClick(city)" />
</template>
</template>
</van-index-bar>
// 定义props
const props = defineProps({
groupData: {
type: Object,
default: () => ({})
}
})
2、在city.vue中,因为获取两个title网速太慢可进行优化content
<template v-for="(value, key, index) in allCities">
<city-group v-show="tabActive === key" :group-data="value" />
</template>
3、热门 分组
<van-index-anchor index="热门" />
<div class="list">
<template v-for="(city, index) in groupData.hotCities">
<div class="city" @click="cityClick(city)">{{ city.cityName }}</div>
</template>
</div>
// 动态的索引
const indexList = computed(() => {
const list = props.groupData.cities.map(item => item.group)
list.unshift("#")
return list
})
// 监听城市的点击
const router = useRouter()
const cityStore = useCityStore()
const cityClick = (city) => {
// 选中当前城市 store共享数据
cityStore.currentCity = city
// 返回上一级
router.back()
}
在city.js中
currentCity: {
cityName: "广州"
}
数据回显在home-search-box中回显
const cityStore = useCityStore()
const { currentCity } = storeToRefs(cityStore)