【uniapp Uview】 IndexList用法 姓氏分组方法
在这里我们用到一个js方法 data_letter_sort首字符姓氏分组<template><view><u-index-list :scrollTop="scrollTop" ><view v-for="(item, index) in indexList" :key="index"><u-index-anchor :index="item
·
在这里我们用到一个js方法 data_letter_sort 首字符姓氏分组
<template>
<view>
<u-index-list :scrollTop="scrollTop" >
<view v-for="(item, index) in indexList" :key="index">
<u-index-anchor :index="item.name" />
<view class="list-cell" v-for="(i,num) in item.list" :key="num">
{{i.userName}}
</view>
</view>
</u-index-list>
</view>
</template>
<script>
import { findAllTeamAndTeacher} from '../../api/teacher.js'
export default {
data() {
return {
scrollTop: 0,
indexList: [
{
name:'A',
list:[]
},
{
name:'B',
list:[]
},
{
name:'C',
list:[]
},
{
name:'D',
list:[]
},
{
name:'E',
list:[]
},
{
name:'F',
list:[]
},
{
name:'G',
list:[]
},
{
name:'H',
list:[]
},
{
name:'I',
list:[]
},
{
name:'J',
list:[]
},
{
name:'K',
list:[]
},
{
name:'L',
list:[]
},
{
name:'M',
list:[]
},
{
name:'N',
list:[]
},
{
name:'O',
list:[]
},
{
name:'P',
list:[]
},
{
name:'Q',
list:[]
},
{
name:'R',
list:[]
},
{
name:'S',
list:[]
},
{
name:'T',
list:[]
},
{
name:'U',
list:[]
},
{
name:'V',
list:[]
},
{
name:'W',
list:[]
},
{
name:'X',
list:[]
},
{
name:'Y',
list:[]
},
{
name:'Z',
list:[]
},
],
}
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
methods: {
data_letter_sort (data, field) {
var letter_reg = /^[A-Z]$/;
var list = new Array();
var letter
for (var i = 0; i < data.length; i++) {
// 添加 # 分组,用来 存放 首字母不能 转为 大写英文的 数据
list['#'] = new Array();
// 首字母 转 大写英文
letter = (data[i][field]).substr(0, 1).toUpperCase();
// 是否 大写 英文 字母
if (!letter_reg.test(letter)) {
letter = '#';
}
// 创建 字母 分组
if (!(letter in list)) {
list[letter] = new Array();
}
// 字母 分组 添加 数据
list[letter].push(data[i]);
}
// 转换 格式 进行 排序;
var resault = new Array();
for (var key in list) {
resault.push({
letter: key,
list: list[key]
});
}
resault.sort(function (x, y) {
return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
});
// # 号分组 放最后
var last_arr = resault[0];
resault.splice(0, 1);
resault.push(last_arr);
// 转换 数据 格式
var json_sort = {}
for (var i = 0; i < resault.length; i++) {
json_sort[resault[i].letter] = resault[i].list;
}
return json_sort;
},
findAllTeamAndTeacher(){
findAllTeamAndTeacher().then(res=>{
console.log(res)
var resault = this.data_letter_sort(res.data, 'userNameIndex');
console.log(resault)
for(let i=0;i<this.indexList.length;i++){
for(let key in resault){
if(key == this.indexList[i].name){
this.indexList[i].list=resault[key]
}
}
}
console.log(this.indexList)
})
},
},
onShow(){
this.findAllTeamAndTeacher()
}
}
</script>
<style lang="scss" scoped>
.list-cell {
display: flex;
box-sizing: border-box;
width: 100%;
padding: 10px 24rpx;
overflow: hidden;
color: #323233;
font-size: 14px;
line-height: 24px;
background-color: #fff;
}
</style>
更多推荐
已为社区贡献5条内容
所有评论(0)