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

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

話不多說開始上碼

我用的是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è)字母排序

然后來看看我的數(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è)簡單的循環(huán)就OK

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

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

下面一步就是關(guān)鍵的一步了
直接將數(shù)組的首字母取出來并按照A-Z排序
這里用到了一個(gè)插件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})

然后就可以使用了

直接一個(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ù)組，用來存儲(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>

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

當(dāng)前名稱：vantIndexBar實(shí)現(xiàn)的城市列表的示例代碼
文章來源：http://jinyejixie.com/article28/pppejp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、小程序開發(fā)、微信小程序、App設(shè)計(jì)、軟件開發(fā)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)