版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27717857/article/details/80625879
先上一张效果图：
列表html template (使用 ydui移动端UI , 地址：http://vue.ydui.org/)
<yd-cell-group v-for="item in memberList" :title="item.letter" :id="item.letter" :ref="item.letter" style="padding: 0;margin: 0">
<yd-cell-item v-for="i in item.data">
<img slot="left" v-lazy="imageUrl+i.Image" width="30" height="30" style="border-radius: 15px">
<span slot="left" style="margin-left: 10px">{{i.Name}}
</span>
</yd-cell-item>
</yd-cell-group> 字母索引html
<div v-if="showLetter" class="centerLetter"><strong>{{letter}}</strong></div>
<div class="letterList" v-if="showLetterList">
<a v-for="letter in Letters" style="display: block;font-size: 14px;margin-top: 1px" @click="jumper(letter)"><span>{{letter}}</span></a>
<a style="display: block" @click="jumper('#')">#</a>
</div>script
<script>
import axios from 'axios'
import qs from 'qs'
import util from '@/util.js'
import $ from 'jquery';
export default {
components:{
'class-select':classSelect
},
data(){
return{
locationHref:this.$route.path,
imageUrl:this.imageApi,
fullHeight: document.documentElement.clientHeight,
showLetter:false,
showLetterList:true,
letter:'',
Letters:['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z'],
panelShow:false,
gradeId:'',
classId:'',
className:'',
memberList:[],
startDate:'',
}
},
computed:{
scrollHeight(){
return (Number(this.fullHeight)-94)+'px';
}
},
filters:{
},
methods:{
hidePanel () {
this.panelShow = false;
},
showPanel(){
this.panelShow = true;
},
showInfo(data){
console.log(data);
this.className = data.class_name;
this.gradeId = data.grade_id;
this.classId = data.class_id;
this.getClassMember();
},
//拉取班级成员
getClassMember(){
this.$dialog.loading.open('');
axios.get(this.Api+'ClassMember/classmemberlist/1/1000?G_ID='+this.gradeId+'&C_ID='+this.classId).then(res =>{
var list = res.data.data;
this.$dialog.loading.close('');
//返回的姓名数组按A-Z排序
this.memberList = util.pySort(list);
console.log("memberList",this.memberList );
})
},
//字母索引锚点定位
jumper(key){
if (key=='#') {
$('#content').animate({
scrollTop:0
},100)
return;
}else{
this.letter=key;
var _this=this;
//点击侧边字母后屏幕中间的字母也显示,500毫秒隐藏
if(this.showLetter==false){
this.showLetter=true;
setTimeout(function(){
_this.showLetter=false;
},500)
}else{
this.showLetter=false;
}
var el = document.getElementById(key);
if(el){
var scrollPosition= el.offsetTop;
console.log("scrollPosition",scrollPosition)
$('#content').animate({
scrollTop:scrollPosition
},100)
}
}
}
},
mounted(){
}
}
</script>util.js (只对汉字做了排序)
//首字母截取使用的是 https://github.com/sxei/pinyinjs/点击打开链接 这个工具库
//示例：
//<script type="text/javascript" src="pinyin_dict_firstletter.js"></script>
//<script type="text/javascript" src="pinyinUtil.js"></script>
//<script type="text/javascript">
//pinyinUtil.getFirstLetter('小茗同学'); // 输出 XMTX
//pinyinUtil.getFirstLetter('大中国', true); // 输出 ['DZG', 'TZG']
//</script>
export default{
pySort(arr){
var $this = this;
var letters = "ABCDEFGHJKLMNOPQRSTWXYZ".split('');
var result = [];
var curr;
for(var i=0;i<letters.length;i++){
curr = {letter: letters[i], data:[]};
for(var j =0;j<arr.length;j++){
var firstLetter = pinyinUtil.getFirstLetter(arr[j].Name)
var initial = firstLetter.charAt(0);//截取第一个字符
if(initial==letters[i]||initial==letters[i].toLowerCase()){
curr.data.push({
Name:arr[j].Name,
Image:arr[j].Image,
MonitorFlag:arr[j].MonitorFlag,
Student_ID:arr[j].Student_ID
});
}
}
if(curr.data.length) {
result.push(curr);
}
}
return result;
}
}