背景
寫選擇手機號碼前綴功能,需要使用索引欄,遂到框架內找到,并在網上找到數據
image.png
image.png
開始
1.安裝vant:https://vant-contrib.gitee.io/vant/#/zh-CN/index-bar
vant 上有寫好的框架,能省很多力氣,我一向是有框架絕對不自己寫輪子
2.數據
export let country = {
'hot': [
["中國大陸", "+86"],
["香港", "+852"],
["澳門", "+853"],
["臺灣", "+886"],
["美國", "+1"],
["日本", "+81"],
],
"A": [
["阿爾巴尼亞", "+355"],
["阿爾及利亞", "+213"],
["阿富汗", "+93"],
["阿根廷", "+54"],
["阿魯巴島", "+297"],
["阿曼", "+968"],
["阿塞拜疆", "+994"],
["阿森松(英)", "+247"],
["埃及", "+20"],
["埃塞俄比亞", "+251"],
["愛爾蘭", "+353"],
["愛沙尼亞", "+372"],
["安道爾", "+376"],
["安哥拉", "+244"],
["安圭拉島(英)", "+1264"],
["安提瓜和巴布達", "+1268"],
["奧地利", "+43"],
["澳大利亞", "+61"],
["澳門", "+853"],
],
'B': [
["巴巴多斯", "+1246"],
["巴布亞新幾內亞", "+675"],
["巴哈馬國", "+1242"],
["巴基斯坦", "+92"],
["巴拉圭", "+595"],
["巴林", "+973"],
["巴拿馬", "+507"],
["巴西", "+55"],
["白俄羅斯", "+375"],
["百慕大群島(英)", "+1441"],
["保加利亞", "+359"],
["貝寧", "+229"],
["比利時", "+32"],
["冰島", "+354"],
["波多黎各(美)", "+1"],
["波蘭", "+48"],
["波斯尼亞和黑塞哥維那", "+387"],
["玻利維亞", "+591"],
["伯利茲", "+501"],
["博茨瓦納", "+267"],
["不丹", "+975"],
["布基納法索", "+226"],
["布隆迪", "+257"],
],
'C': [
["朝鮮", "+850"],
["赤道幾內亞", "+240"],
],
'D': [
["丹麥", "+45"],
["德國", "+49"],
["東薩摩亞(美)", "+1684"],
["多哥", "+228"],
["多米尼加共和國", "+1809"],
["多米尼克國", "+1767"],
],
'E': [
["俄羅斯", "+7"],
["厄瓜多爾", "+593"],
["厄立特里亞", "+291"],
],
'F': [
["法國", "+33"],
["法羅群島(丹)", "+298"],
["法屬波里尼西亞", "+689"],
["梵蒂岡", "+14397"],
["菲律賓", "+63"],
["斐濟", "+679"],
["芬蘭", "+358"],
["佛得角", "+238"],
["福克蘭群島", "+500"],
],
'G': [
["岡比亞", "+220"],
["剛果", "+242"],
["哥倫比亞", "+57"],
["哥斯達黎加", "+506"],
["格林納達", "+1473"],
["格陵蘭島", "+299"],
["格魯吉亞", "+995"],
["古巴", "+53"],
["瓜德羅普島(法)", "+590"],
["關島(美)", "+1671"],
["圭亞那", "+592"],
],
'H': [
["哈薩克斯坦", "+7"],
["海地", "+509"],
["韓國", "+82"],
["荷蘭", "+31"],
["荷屬安的列斯群島", "+599"],
["洪都拉斯", "+504"],
["基里巴斯", "+686"],
],
'J': [
["吉布提", "+253"],
["吉爾吉斯斯坦", "+996"],
["幾內亞", "+224"],
["幾內亞比紹", "+245"],
["加拿大", "+1"],
["加納", "+233"],
["加蓬", "+241"],
["柬埔塞", "+855"],
["捷克", "+420"],
["津巴布韋", "+263"],
],
'K': [
["喀麥隆", "+237"],
["卡塔爾", "+974"],
["開曼群島(英)", "+1345"],
["科科斯島", "+61"],
["科克群島(新)", "+682"],
["科摩羅", "+269"],
["科特迪瓦", "+225"],
["科威特", "+965"],
["克羅地亞", "+385"],
["肯尼亞", "+254"],
],
'L': [
["拉脫維亞", "+371"],
["萊索托", "+266"],
["老撾", "+856"],
["黎巴嫩", "+961"],
["立陶宛", "+370"],
["利比里亞", "+231"],
["利比亞", "+218"],
["列支敦士登", "+423"],
["留尼汪島", "+262"],
["盧森堡", "+352"],
["盧旺達", "+250"],
["羅馬尼亞", "+40"],
],
'M': [
["馬達加斯加", "+261"],
["馬爾代夫", "+960"],
["馬耳他", "+356"],
["馬拉維", "+265"],
["馬來西亞", "+60"],
["馬里", "+223"],
["馬里亞納群島", "+1670"],
["馬其頓", "+389"],
["馬紹爾群島", "+692"],
["馬提尼克(法)", "+596"],
["馬約特島", "+262"],
["毛里求斯", "+230"],
["毛里塔尼亞", "+222"],
["美國", "+1"],
["蒙古", "+976"],
["蒙特塞拉特島(英)", "+1664"],
["孟加拉國", "+880"],
["秘魯", "+51"],
["密克羅尼西亞(美)", "+691"],
["緬甸", "+95"],
["摩爾多瓦", "+373"],
["摩洛哥", "+212"],
["摩納哥", "+377"],
["莫桑比克", "+258"],
["墨西哥", "+52"],
],
'N': [
["納米比亞", "+264"],
["南非", "+27"],
["南斯拉夫", "+381"],
["瑙魯", "+674"],
["尼泊爾", "+977"],
["尼加拉瓜", "+505"],
["尼日爾", "+227"],
["尼日利亞", "+234"],
["紐埃島(新)", "+683"],
["挪威", "+47"],
["諾福克島(澳)", "+672"],
],
'P': [
["帕勞(美)", "+680"],
["葡萄牙", "+351"],
],
'R': [
["日本", "+81"],
["瑞典", "+46"],
["瑞士", "+41"],
],
'S': [
["薩爾瓦多", "+503"],
["塞拉利昂", "+232"],
["塞內加爾", "+221"],
["塞浦路斯", "+357"],
["塞舌爾", "+248"],
["桑給巴爾", "+259"],
["沙特阿拉伯", "+966"],
["圣誕島", "+61"],
["圣多美和普林西比", "+239"],
["圣赫勒拿", "+290"],
["圣克里斯托弗和尼維斯", "+1869"],
["圣盧西亞", "+1758"],
["圣馬力諾", "+378"],
["圣皮埃爾島及密克隆島", "+508"],
["圣文森特島(英)", "+1784"],
["斯里蘭卡", "+94"],
["斯洛伐克", "+421"],
["斯洛文尼亞", "+386"],
["斯威士蘭", "+268"],
["蘇丹", "+249"],
["蘇里南", "+597"],
["所羅門群島", "+677"],
["索馬里", "+252"],
],
'T': [
["塔吉克斯坦", "+992"],
["臺灣", "+886"],
["泰國", "+66"],
["坦桑尼亞", "+255"],
["湯加", "+676"],
["特克斯和凱科斯群島(英)", "+1649"],
["特立尼達和多巴哥", "+1868"],
["突尼斯", "+216"],
["圖瓦盧", "+688"],
["土耳其", "+90"],
["土庫曼斯坦", "+993"],
],
'W': [
["瓦努阿圖", "+678"],
["危地馬拉", "+502"],
["維爾京群島(英)", "+1340"],
["委內瑞拉", "+58"],
["烏干達", "+256"],
["烏克蘭", "+380"],
["烏拉圭", "+598"],
["烏茲別克斯坦", "+998"],
],
'X': [
["西班牙", "+34"],
["西薩摩亞", "+685"],
["希臘", "+30"],
["香港", "+852"],
["新加坡", "+65"],
["新喀里多尼亞群島(法)", "+687"],
["新西蘭", "+64"],
["匈牙利", "+36"],
["敘利亞", "+963"],
],
'Y': [
["牙買加", "+1876"],
["亞美尼亞", "+374"],
["也門", "+967"],
["伊拉克", "+964"],
["伊郎", "+98"],
["以色列", "+972"],
["意大利", "+39"],
["印度", "+91"],
["印度尼西亞", "+62"],
["英國", "+44"],
["約旦", "+962"],
["越南", "+84"],
],
'Z': [
["贊比亞", "+260"],
["乍得", "+235"],
["直布羅陀(英)", "+350"],
["智利", "+56"],
["中非", "+236"],
["中國大陸", "+86"],
],
}
3.引入數據
import { country } from "../../util/phonePrefix";
4.實例
return {
indexList: [],
dataList: {},
};
5.開始了,其實很簡單,就是邏輯問題
created() {
this.indexList = Object.keys(country); //獲取到key數組,用作側邊索引
console.log(Object.keys(country))// ["hot", "A", "B", "C", "D", "E", "F", "G", "H", "J", "K", "L", "M", "N", "P", "R", "S", "T", "W", "X", "Y", "Z"]
this.dataList = country; //數據
},
6.遍歷
<van-index-bar :index-list="indexList" sticky> //這個功能官方已經寫好,我們把剛才獲取的側邊索引數組填入就自動生成側邊索引了
<div v-for="(item, index) in dataList" :key="index"> // 根據上面的數據得知,我們用腳指頭都知道循環兩次,我們循環一次,得到的就是數組內對應的key數據了
<van-index-anchor :index="index">
{{ index }} //因為我們的數據key不是數字,而是我們的索引,所以直接寫index,自然就顯示成標題了
</van-index-anchor>
<div
v-for="(test, inde) in item" //循環第二次,把對應的key進行循環,得到key里面的每個小數據,別猶豫按著寫就完事了,
:key="inde"
class="cell"
:data-num="test[1]"
@click="getPhoneNum($event)"
>
<span>{{ test[0] }}</span> //這里就不用循環了,直接填
<span>{{ test[1] }}</span>
</div>
</div>
</van-index-bar>
總結:
本來沒想寫成博客,首先這個功能大家一看感覺很高大上,自己不好實現,再加上網上很多代碼給的方法不對,導致會走彎路,我都是沒事逛框架網站,基本都知道哪個網站有什么功能,我只是碼農,以實現功能為主
回歸正題:有個群友說如果key是動態的,數據也是動態,怎么辦. 目前已經解決,我們通過獲取數據的key組成索引, 這樣保證key是動態的,循環數據這邊小白可以一步一步來,先打印出來看看,從外循環到內, 首先我們得到的是一整個數據,循環第一次得到每塊數據,每塊數據的index就是標題a,b,c,d那些,我們再循環item,得到每小塊數據, 我說的還算明白把?
