快捷導(dǎo)航

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

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

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

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

話不多說(shuō)開始上碼

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

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

點(diǎn)擊索引欄時(shí)，會(huì)自動(dòng)跳轉(zhuǎn)到對(duì)應(yīng)的IndexAnchor錨點(diǎn)位置

<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默認(rèn)是A-Z這里我們不用去自定義

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

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

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

因?yàn)橹暗臄?shù)據(jù)很亂所以我讓后臺(tái)老哥重新寫了一個(gè)只包含市級(jí)城市的列表這樣就非常好處理了

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

一個(gè)簡(jiǎn)單的循環(huán)就OK

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

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

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

npm install js-pinyin

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

import pinyin from 'js-pinyin'

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

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

然后就可以使用了

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

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中定義的一個(gè)數(shù)組，用來(lái)存儲(chǔ)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組件中寫一個(gè)循環(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>