vue2.0 实现汉字A-Z排序与手机通讯录效果

先上一张效果图：

列表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;
}}

vue2.0 实现汉字A-Z排序与手机通讯录效果相关推荐

vue2.0 实现汉字A-Z排序与手机通讯录效果
先上一张效果图: 列表html template (使用 ydui移动端UI , 地址:http://vue.ydui.org/) <yd-cell-group v-for="i ...
使用vue2.0 vue-router vuex 模拟ios7操作
其实你也可以,甚至做得更好... 首先看一下效果:用vue2.0实现SPA:模拟ios7操作与通讯录实现 github地址是:https://github.com/QRL909109/ios7 如 ...
一款基于Vue2.0高仿微信App的单页应用
概述利用Vue2.0模仿微信app,努力做到以假乱真的效果.个人独立开发,源码中有详细的注释,为新手提供许多有用的提示信息.项目的第一期接近尾声,后期会增加仿3DTouch.登陆.注册.emoji ...
java pinyin4j 首字母_通讯录之按汉字首字母排序 --java--pinyin4J
最近开发手机端OA系统通讯录时遇到了用汉字首字母排序的问题,各种谷歌后发现了一个轮子pinyin4J,这个轮子是可以将汉字转换成字母拼音,个人觉得很好用,完美的解决了排序的问题,分享一下. 一.工具介 ...
MySQL按照汉字拼音A-Z排序或者汉字拼音和英文字母混合A-Z排序
1.按照汉字拼音A-Z排序主要用到convert这个函数把字符编码转换一下,这里转成gbk select * from 表名 where name like '%%' order by conver ...
MySql中用sql语句实现按汉字首字母排序
转载自https://blog.csdn.net/hulinyi123456/article/details/79915521 1.mysql 1)按照汉字的拼音排序如果存储汉字的字段编码使用的是G ...
js 根据汉字首字母排序（省份排序）或根据英文首字母排序——za排序 az排序
js 根据汉字首字母排序(省份排序) 或根据英文首字母排序--z~a排序 & a~z排序示例1 let arr = ["贵州省", "江苏省", & ...
表格排序支持汉字按拼音排序,面向对象的使用方法
周末无聊利用swapNode方法写了个排序算法,性能比较一般,超简单的冒泡排序,但是由于使用了swapNode,所以TR以及TD对象后绑定的属性不会丢失,同时解决了checkbox在swapNode后 ...
mysql 字母分组_MySQL按照汉字的拼音排序、按照首字母分类
项目中有时候需要按照汉字的拼音排序,比如联系人列表.矿物分类等,有的还需要按拼音字母从A到Z分类显示. 如果存储汉字的字段编码使用的是GBK字符集,因为GBK内码编码时本身就采用了拼音排序的方法(常用 ...

vue2.0 实现汉字A-Z排序与手机通讯录效果

vue2.0 实现汉字A-Z排序与手机通讯录效果

先上一张效果图：

vue2.0 实现汉字A-Z排序与手机通讯录效果相关推荐

最新文章

热门文章