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" href="https://unpkg.com/mint-ui/lib/style.css">
<!-- 先引入 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 = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".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>
网友评论