vue3+vant4 二次封装IndexBar都会列表组件以及性能优化 - ToB企服应用市场:ToB评测及商务社交产业平台

<script lang="ts" setup>
import { ref, computed, onMounted} from 'vue'
import { useRouter } from 'vue-router'
import { city } from '@/assets/json/city.json' // 同步导入 JSON 数据
const router = useRouter()
const cityData = city
// const indexList = ['A', 'B', 'C']
//获取所有城市首字母
const indexList = computed(() => {
return cityData.map(item => item.initial)
})
</script>

复制代码

<script lang="ts" setup>
import { ref, computed, onMounted } from 'vue'
const cityData = ref([])
// const indexList = ['A', 'B', 'C']
//获取所有城市首字母
const indexList = computed(() => {
return cityData.value.map(item => item.initial)
})
// 异步加载城市数据性能优化
async function loadCities() {
try {
const data = await import('@/assets/json/city.json') // 动态导入 JSON 数据
cityData.value = data.city // 更新 cities 的值
// console.log(cityData, 'cityData.value')
} catch (error) {
console.error('Failed to load cities:', error)
}
}
// 在组件挂载后加载数据
onMounted(() => {
loadCities()
})
</script>

复制代码

<script lang="ts">
export default {
name: 'CityList',
}
</script>
<script lang="ts" setup>
import { ref, computed, onMounted, } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const cityData = ref([])
// const indexList = ['A', 'B', 'C']
//获取所有城市首字母
const indexList = computed(() => {
return cityData.value.map(item => item.initial)
})
// 选择城市回首页
const backHome = cityname => {
// router.push({ path: '/', query: { cityname: cityname + '市' } })
console.log(cityname + '市', '选中的城市')
}
// 异步加载城市数据性能优化
async function loadCities() {
try {
const data = await import('@/assets/json/city.json') // 动态导入 JSON 数据
cityData.value = data.city // 更新 cities 的值
// console.log(cityData.value, 'cityData.value')
} catch (error) {
console.error('Failed to load cities:', error)
}
}
// 在组件挂载后加载数据
onMounted(() => {
loadCities()
})
</script>
<template>
<div class="city-list-container">
<div class="hotcity">所有城市</div>
<van-index-bar :index-list="indexList" highlight-color="#1989fa">
<div v-for="(city, idx1) in cityData" :key="idx1">
<van-index-anchor :index="city.initial"></van-index-anchor>
<van-cell v-for="(item, idx2) in city.list" :key="idx2" :title="item.name" @click="backHome(item.name)"></van-cell>
</div>
</van-index-bar>
</div>
</template>
<style scoped lang="scss">
.hotcity {
padding: 30px;
font-size: 28px;
font-weight: bold;
}
::v-deep(.van-index-bar) {
background-color: #fff;
}
::v-deep(.van-index-bar__sidebar) {
top: 72%;
}
</style>

复制代码

<template>
<div>
<CityList />
</div>
</template>

复制代码