vant IndexBar實現(xiàn)的城市列表的示例代碼

更新時間：2019年11月20日 11:00:34 作者：Resssssss

這篇文章主要介紹了vant IndexBar實現(xiàn)的城市列表的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

在開發(fā)中有個需求是一個選擇城市的列表，看了看做成三級聯(lián)動好像不是特別方便還是做成一整頁可以按導(dǎo)航選取的就可以了

話不多說開始上碼

我用的是vant這個ui框架中的IndexBar組件其實這個組件已經(jīng)把需要的都弄好了我們只要處理數(shù)據(jù)就好了

首先需要引入IndexBar組件這個就不再贅述了官網(wǎng)寫的很清楚

點擊索引欄時，會自動跳轉(zhuǎn)到對應(yīng)的IndexAnchor錨點位置

<van-index-bar>
 <van-index-anchor index="A" />
 <van-cell title="文本" />
 <van-cell title="文本" />
 <van-cell title="文本" />

 <van-index-anchor index="B" />
 <van-cell title="文本" />
 <van-cell title="文本" />
 <van-cell title="文本" />

 ...
</van-index-bar>

這是vant官方文檔IndexBar的基本用法文檔

IndexAnchor默認是A-Z這里我們不用去自定義

循環(huán)部分我的思路是按每個城市名稱的首個字母排序

然后來看看我的數(shù)據(jù)

{
  "id": 101,
  "name": "北京市",
  "pid": 1,
  "code": 0
},
{
  "id": 10101,
  "name": "天津市",
  "pid": 10001,
  "code": 0
},
{
  "id": 20101,
  "name": "石家莊市",
  "pid": 20001,
  "code": 130100
}

因為之前的數(shù)據(jù)很亂所以我讓后臺老哥重新寫了一個只包含市級城市的列表這樣就非常好處理了

第一步先把城市的名稱取出

一個簡單的循環(huán)就OK

let cityNameList = []
for(let p in cityList){
  cityNameList.push(cityList[p].name)
}

ok現(xiàn)在我們就把城市的名稱存到了cityNameList中了

下面一步就是關(guān)鍵的一步了
直接將數(shù)組的首字母取出來并按照A-Z排序
這里用到了一個插件pinyin 用它來將中文的首字母取出來
首先安裝

npm install js-pinyin

然后我是在mian.js中引入的

import pinyin from 'js-pinyin'

然后在你的業(yè)務(wù)頁面配置

let pinyin = require('js-pinyin')
pinyin.setOptions({checkPolyphone:false,charCase:0})

然后就可以使用了

直接一個循環(huán)達到我們的效果

let firstName = {};
this.FirstPin.forEach((item)=>{
  firstName[item] = [];
  cityNameList.forEach((el)=>{
    let first = pinyin.getFullChars(el).substring(0,1);
    if( first == item ){
     firstName[item].push(el)
    }    
  })
 })

這里的FirstPin是在data中定義的一個數(shù)組，用來存儲A-Z

 FirstPin: ["A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"],

然后我的firstName的格式是這樣的

firName:{
  A:["阿拉善盟","鞍山市"]
}

最后在InderBar組件中寫一個循環(huán)就可以了

<van-index-bar class="indexBar" :sticky="false" highlight-color="#fb6463">
    <van-index-anchor  v-for="(item,index) in firstName" :key="index" :index="index">
     <span class="indexWord">{{index}}</span>
     <van-cell @click="chooseCity(citem)" v-for="(citem,cindex) in item" :key="cindex" :title="citem"/>
    </van-index-anchor>
 </van-index-bar>