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

創(chuàng)新互聯(lián)主營(yíng)克州網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶APP開(kāi)發(fā)公司,克州h5微信小程序搭建,克州網(wǎng)站營(yíng)銷(xiāo)推廣歡迎克州等地區(qū)企業(yè)咨詢(xún)

話(huà)不多說(shuō)開(kāi)始上碼

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

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

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

 
 
 
 

 
 
 
 

 ...

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

IndexAnchor默認(rèn)是A-Z這里我們不用去自定義

循環(huán)部分 我的思路是按每個(gè)城市名稱(chēng)的首個(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)老哥重新寫(xiě)了一個(gè)只包含市級(jí)城市的列表 這樣就非常好處理了

第一步先把城市的名稱(chēng)取出

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

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

ok現(xiàn)在我們就把城市的名稱(chēng)存到了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組件中寫(xiě)一個(gè)循環(huán)就可以了

    
     {{index}}
     
    
 

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。