zoukankan      html  css  js  c++  java
  • vant做城市列表

    vant: https://youzan.github.io/vant/#/zh-CN/

     安装

    cnpm i -S vant

    按需加载配置

    #  babel.config.js 中配置

     

    module.exports = {
      plugins: [
        ['import', {
          libraryName: 'vant',
          libraryDirectory: 'es',
          style: true
        }, 'vant']
      ],
      presets: [
        '@vue/cli-plugin-babel/preset'
      ]
    }

     

    对于获取到的城市数据进行处理创建个api.js文件

    
    
     // 引入封装头信息和请求域名的axios对象
    import http from './http'
     // 引入请求的url地址
    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])
      }

    在组件中使用

    <template>
      <div>
        <van-index-bar :index-list="indexList" highlight-color="#ff0000">
          <template v-for="item in datalist">
            <van-index-anchor :index="item.index" :key="item.index" />
            <van-cell v-for="subitem in item.data" :title="subitem.name" />
          </template>
        </van-index-bar>
      </div>
    </template>

    <script>
    import Vue from 'vue'
    import { IndexBar, IndexAnchor, Cell } from 'vant'
    import { cityData } from '../../api/api'
    Vue.use(IndexBar)
    Vue.use(IndexAnchor)
    Vue.use(Cell)
    export default {
      data() {
        return {
          dataList: [],
          indexList: ['A', 'B']
        }
      },
      mounted() {
        this.getData()
      },
      methods: {
        async getData() {
          const ret = await cityData()
          this.datalist = ret[0]
          this.indexList = ret[1]
        }
      }
    }
    </script>

    <style></style>

     

    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    HDOJ 1207 汉诺塔II
    [转]写代码的小女孩
    POJ Subway tree systems
    HDOJ 3555 Bomb (数位DP)
    POJ 1636 Prison rearrangement (DP)
    POJ 1015 Jury Compromise (DP)
    UVA 10003
    UVA 103 Stacking Boxes
    HDOJ 3530 Subsequence
    第三百六十二、三天 how can I 坚持
  • 原文地址:https://www.cnblogs.com/ht955/p/14271061.html
Copyright © 2011-2022 走看看