vue3 +vant4 实现楼梯效果

 数据接口node.js

router.get('/city', async function (req, res, next) {
  let adList=await cityModel.find().lean()
  let jsonAd={}
  let data=[]
  adList.forEach(item=>{
    jsonAd[item.code]=item
  })
  adList.forEach(item=>{
    if(!item["superior"]){
      data.push(item)
    }else{
      if(!jsonAd[item["superior"]]["children"]){
        jsonAd[item["superior"]]["children"]=[]
      }
      jsonAd[item["superior"]]["children"].push(item)
    }
  })
  // const data = await cityModel.find()
  res.send({
    code: 200,
    data
  });
});

 

<template>
    <div class="city">
        <van-index-bar>
            <div v-for="item in cityList" :key="item.type">
                <van-index-anchor :index="item.type" />
                <van-cell v-for="(item1, index) in item.list" :title="item1.name" :key="item1._id"
                    @click="handleChangePage(item1)" />
            </div>
        </van-index-bar>
    </div>
</template>

<script setup>
import pinyin from 'js-pinyin'
import { ref, inject, onMounted, reactive,computed,nextTick } from "vue"

let axios = inject("$axios")


let cityList =ref([])
let inCity = ref(null)

let getCity = async () => {
    let { data } = await axios.get("http://localhost:3000/city")
    nextTick(()=>{
    cityList.value = handleCityData(data.data)
    })
    
}

onMounted(() => {
    getCity()
})
let handleCityData = (cities) => {
    let letterArr = []
    let newCities = []
    for (let code = 65; code < 91; code++) {
        letterArr.push(String.fromCharCode(code))
    }
    letterArr.forEach((letter) => {
        let list = cities.filter(item => {
            return pinyin.getFullChars(item.name).substring(0, 1).toUpperCase() === letter
        })
        // if (list.length > 0) {
        newCities.push({
            type: letter,
            list: list
        })
        // }
    })
    return newCities
}

let handleChangePage = (index) => {

    console.log(index);
    sessionStorage.setItem("cityName",JSON.stringify(index))
}



</script>

<style lang="scss" scoped>
.city {
    width: 100%;
    height: 100%;
}
</style>