vant: https://youzan.github.io/vant/#/zh-CN/
安装
cnpm i -S vant
按需加载配置
# 在 babel.config.js 中配置
对于获取到的城市数据进行处理创建个api.js文件
import http from ‘./http‘
import{ cityUri } from ‘../config/uri‘ export const cityData = async () => { // 判断本地是否有缓存,如果有则不请求远程数据 let cacheData = !localStorage.getItem(‘cityData‘) ? [] : JSON.parse(localStorage.getItem(‘cityData‘)) if(cacheData.length > 0){ return Promise.resolve(cacheData) } let ret = await http.get(cityUrl,{ headers:{ // 由于请求头信息中不同的需求不同的请求头,所以要判断所用的条件 ‘info‘:‘city‘ } }) let retData = ret.data.cities // 城市字母索引 let cityIndex = [] // 处理完成后的数据 let dataList = [] let indexList = [] for(let i = 65 ; i <= 90 ; i++){ // 这是String.fromCharCode的示例 可接受一个指定的 Unicode 值,然后返回一个字符串 // document.write(String.fromCharCode(65,66,67) ) 输出 ABC cityIndex.push(String.fromCharCode(i)) } cityIndex.forEach(index => { let tmpArr = retData.filter(item => index.toLowerCase() == item.pinyin.substr(0,1)) if(tmpArr.length > 0){ indexList.push(index) dataList.push({ index, data:tmpArr }) } }) let data = [dataList,indexList] localStorage.setItem(‘cityData‘,JSON.stringify(data)) return Promise.resolve([dataList,indexList]) }
在组件中使用
原文:https://www.cnblogs.com/ht955/p/14271061.html