A-Z排序通訊錄.gif
后臺返回的數據格式：
{ id: "v1", cityName: "阿里a" },
{ id: "v2", cityName: "試試s" },
{ id: "v3", cityName: "傳參" },
{ id: "v4", cityName: "版本" },
{ id: "v5", cityName: "天津t" },
{ id: "v6", cityName: "安徽a" },
{ id: "v7", cityName: "阿道夫a" },
{ id: "v8", cityName: "匹配p" },
{ id: "v9", cityName: "海南h" },
{ id: "v10", cityName: "請求q" },
{ id: "v11", cityName: "問我" },
{ id: "v12", cityName: "恩恩" },
{ id: "v13", cityName: "讓人" },
{ id: "v14", cityName: "英語" },
{ id: "v15", cityName: "已寄" },
{ id: "v16", cityName: "公共" },
{ id: "v17", cityName: "張家口z" },
{ id: "v17", cityName: "A張家口z" },
{ id: "v17", cityName: "CC張家口z" },
{ id: "v17", cityName: "D張家口z" },
{ id: "v17", cityName: "d張家口z" },
{ id: "v17", cityName: "d張家口z" },
{ id: "v17", cityName: "!張家口z" },
{ id: "v17", cityName: "-張家口z" },
{ id: "v17", cityName: "0張家口z" },
{ id: "v17", cityName: "=張家口z" },
],
實現之后的數據格式：
{
data: [
{
initial: 'A',
list: []
},
{
initial: 'B',
list: []
}
]
}
本文用 Mint-ui Index List 與Vue相結合實現米酬。
直接上代碼吧??
demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>按A-Z排序通訊錄（中文佃蚜、英文、特殊字符）</title>
<link rel="stylesheet" >
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入組件庫 -->
<script src="https://unpkg.com/mint-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<mt-index-list>
<mt-index-section v-for="(item, index) in pySegSort.segs" :key="index" :index="item.initial">
<mt-cell v-for="(s, index) in item.data" :key="index" :title="s.cityName"></mt-cell>
</mt-index-section>
</mt-index-list>
</div>
<script>
new Vue({
el: '#app',
data(){
return{
arr:[
{ id: "v1", cityName: "阿里a" },
{ id: "v2", cityName: "試試s" },
{ id: "v3", cityName: "傳參" },
{ id: "v4", cityName: "版本" },
{ id: "v5", cityName: "天津t" },
{ id: "v6", cityName: "安徽a" },
{ id: "v7", cityName: "阿道夫a" },
{ id: "v8", cityName: "匹配p" },
{ id: "v9", cityName: "海南h" },
{ id: "v10", cityName: "請求q" },
{ id: "v11", cityName: "問我" },
{ id: "v12", cityName: "恩恩" },
{ id: "v13", cityName: "讓人" },
{ id: "v14", cityName: "英語" },
{ id: "v15", cityName: "已寄" },
{ id: "v16", cityName: "公共" },
{ id: "v17", cityName: "張家口z" },
{ id: "v17", cityName: "A張家口z" },
{ id: "v17", cityName: "CC張家口z" },
{ id: "v17", cityName: "D張家口z" },
{ id: "v17", cityName: "d張家口z" },
{ id: "v17", cityName: "d張家口z" },
{ id: "v17", cityName: "!張家口z" },
{ id: "v17", cityName: "-張家口z" },
{ id: "v17", cityName: "0張家口z" },
{ id: "v17", cityName: "=張家口z" },
{ id: "v17", cityName: "padsjfo" },
{ id: "v17", cityName: "放學" },
],
}
},
computed:{
pySegSort(){
if(this.arr.length == 0) return;
if (!String.prototype.localeCompare) return null;
var letters = "*ABCDEFGHJKLMNOPQRSTWXYZ".split("");
var zh = "阿八嚓噠妸發(fā)旮哈譏咔垃痳拏噢妑七呥扨它穵夕丫帀".split("");
var segs = []; // 存放數據
var res = {};
let curr;
var re = /[^\u4e00-\u9fa5]/;//中文正則
var pattern = new RegExp("[`\\-~!@#$^&*()=|{}':;',\\[\\].<>《》/?~链峭！@#￥……&*（）——|{}【】‘畦娄；：”“'。，熙卡、杖刷？12345678990]"); //特殊符號
letters.filter((items, i) => {
curr = {
initial: '', //字母
data: [] , //數據
};
this.arr.map((v, index) => {
// 特殊字符
if (pattern.test(v.cityName[0])) {
if ((!zh[i - 1] || zh[i - 1].localeCompare(v.cityName) <= 0) && v.cityName.localeCompare(zh[i]) == -1) {
curr.data.push(v);
}
}
// 判斷首個字是否是中文
if (re.test(v.cityName[0])) {
// 英文
if (v.cityName[0].toUpperCase() == items) {
curr.data.push(v);
}
} else {
// 中文
if ((!zh[i - 1] || zh[i - 1].localeCompare(v.cityName) <= 0) && v.cityName.localeCompare(zh[i]) == -1) {
curr.data.push(v);
}
}
})
if ( curr.data.length) {
curr.initial = letters[i]
segs.push(curr);
curr.data.sort((a, b) => {
return a.cityName.localeCompare(b.cityName);
});
}
})
res.segs = Array.from(new Set(segs)) //去重
console.log(res);
return res;
}
},
})
</script>
</body>
</html>
