vue实现通讯录功能

程序员文章站 2022-06-23 12:34:05
vue实现手机通讯录功能，供大家参考，具体内容如下 <...
vue实现手机通讯录功能，供大家参考，具体内容如下
<!doctype html>
<html>
<head>
 <title>动态加载组件</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
 <style>
 *{
  margin: 0px;
  padding: 0px;
  list-style: none;
 }
 .headerbox{
  position: fixed;
  overflow: hidden;
  width: 100%;
  z-index: 999;
  margin-bottom: 40px;
 }
 .header{
  height: 40px;
  line-height: 40px;
  background: #ccc;
  color: white;
  text-align: center;
  border: 1px solid #ddd;
  padding-left: 15px;
  padding-right: 15px;
 }
 .header button:nth-of-type(1){
  float: left;
 }
 .header button:nth-of-type(2){
  float: right;
 }
 .header button{
  height: 40px;
  padding: 0px 5px;
 }
 .header button:last-child{
  float: right;
 }
 .content{
  position: relative;
 }
 
 .item p{
  background: #ccc;
  color: white;
  padding-left: 20px;
  line-height: 30px;
  font-size: 0.9rem;
 }
 .item ul li{
  border-bottom: 1px solid #ddd;
  line-height: 30px;
  padding: 3px 0px 3px 30px;
  font-size: 0.7rem;
 
 }
 
 .list_index{
  position: fixed;
  right: 15px;
  top: 50%;
  text-align: center;
  z-index: 999;
 }
 
 .list_index ul li{
  line-height: 20px;
  cursor: pointer;
  font-size: 0.625rem;
 }
 .redcolor{
  color: red;
 }
 #alert{
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99999;
  display: flex;
 }
 #alert .alert_content{
  width: 70%;
  height: 140px;
  background: white;
  border-radius: 5px;
  margin: auto;
  position: relative;
 }
 #alert .alert_title{
  padding: 8px;
  border-bottom: 1px solid #ddd;
 }
 #alert .alert_tel{
  height: 50px;
  line-height: 50px;
  text-align: center;
 }
 #alert .alert_btn{
  position: absolute;
  right: 0px;
  bottom: 5px;
 }
 #alert .alert_btn button{padding: 8px 12px;margin-right: 10px;border-width: 0px;border-radius:5px ;}
 button:active,button:focus{outline:none;}
 #alert .alert_btn button:first-child{background-color: #00a5e0;color: white;}
 
 
 .showletter{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0px;
  top: 0px;
  z-index: 99;
 }
 .showletter .letter{
  width: 1.8rem;
  height: 1.8rem;
  text-align: center;
  line-height: 1.8rem;
  background-color: #a0a0a0;
  color: white;
  border-radius: 50%;
  font-size: 0.8rem;
 }
 
 </style>
</head>
<body>
<div id="app">
 <!--<my-header custom-title="通讯录" custom-fixed>-->
 <!--<button slot="left">返回</button>-->
 <!--<button slot="right">主页</button>-->
 <!--</my-header>-->
 <my-list :user-data="userdata"></my-list>
</div>
</body>
<script type="text/javascript" src="vue.min.js"></script>
<script>
 
 
 var userdata = [{"letter":"b","data":["包商银行","北京农村商业银行","北京顺义银座村镇银行","北京银行","渤海银行"]},{"letter":"c","data":["沧州银行","承德银行","重庆农村商业银行","重庆黔江银座村镇银行","重庆银行","重庆渝北银座村镇银行"]},{"letter":"d","data":["大连银行","德州银行","东莞农村商业银行","东亚银行","东营莱商村镇银行","东营银行"]},{"letter":"e","data":["鄂尔多斯银行"]},{"letter":"f","data":["福建海峡银行","福建省农村信用社联合社","阜新银行","富邦华一银行","富滇银行"]},{"letter":"g","data":["赣州银行","工商银行","广东华兴银行","广东南粤银行","广东省农村信用社联合社","广发银行","广西北部湾银行","广西壮族自治区农村信用社联合社","广州农村商业银行","广州银行","桂林银行"]},{"letter":"h","data":["哈尔滨银行","海口联合农村商业银行","韩亚银行","汉口银行","河北银行","恒丰银行","衡水银行","湖北银行","湖州银行","葫芦岛银行","华夏银行","徽商银行"]},{"letter":"j","data":["吉林银行","济宁银行","嘉兴银行","建设银行","江苏银行","江苏长江商业银行","江西赣州银座村镇银行","江西省农村信用社联合社","交通银行","焦作中旅银行","金华银行","锦州银行","晋城银行","晋商银行","九江银行"]},{"letter":"k","data":["昆仑银行","昆山农村商业银行"]},{"letter":"l","data":["莱商银行","兰州银行","廊坊银行","临商银行","柳州银行","龙江银行","洛阳银行"]},{"letter":"m","data":["绵阳市商业银行","民生银行"]},{"letter":"n","data":["南京银行","内蒙古银行","宁波通商银行","宁波银行","宁夏黄河农村商业银行","宁夏银行","农业银行"]},{"letter":"p","data":["攀枝花市商业银行","平安银行","平顶山银行","齐鲁银行","齐商银行","企业银行","青岛银行","青海银行"]},{"letter":"q","data":["泉州银行"]},{"letter":"r","data":["日照银行"]},{"letter":"s","data":["山东省农村信用社联合社","上海银行","上饶银行","绍兴银行","深圳福田银座村镇银行","深圳农村商业银行","深圳前海微众银行","四川省农村信用社联合社","苏州银行"]},{"letter":"t","data":["台州银行","太仓农村商业银行","天津农村商业银行","天津银行"]},{"letter":"w","data":["威海市商业银行","潍坊银行","温州银行","武汉农村商业银行"]},{"letter":"x","data":["西安银行","厦门国际银行","厦门银行","新韩银行","邢台银行","兴业银行"]},{"letter":"y","data":["烟台银行","营口银行","邮政储蓄银行","友利银行"]},{"letter":"z","data":["枣庄银行","张家港农村商业银行","长安银行","长沙银行","招商银行","浙江稠州商业银行","浙江景宁银座村镇银行","浙江民泰商业银行","浙江三门银座村镇银行","浙江省农村信用社联合社","浙江泰隆商业银行","浙商银行","郑州银行","中国银行","中信银行","中原银行","珠海华润银行"]}]
 
 
 vue.component('my-header',{
 template:`<div class="headerbox" :style="{'position':customfixed ? 'fixed':'static'}">
   <div class="header" >
   <slot name="left"></slot>
   {{customtitle}}
   <slot name="right"></slot>
   </div></div>`,
 props:{
  'customtitle':{
  type:string,
  default:'标题'
  },
  'customfixed':{
  type:boolean,
  default:true
  }
 }
 });
 vue.component('my-list',{
 template:`<div class="content" id="content">
   <ul ref="listuser" @touchmove="bmove=true">
    <li class="item" v-for="(index,item) in userdata">
    <p data-index="{{index}}">{{item.letter}}</p>
    <ul>
     <li v-for="bankname in item.data">{{bankname}}</li>
    </ul>
    </li>
   </ul><div class="list_index" id="listindex" ref="listindex">
    <ul id="list_index">
    <li @touchstart="setscroll(item)" :class="redcolorindex==index?'redcolor':''" @touchend="showbigletter(item)" data-index="{{index}}" v-for="(index,item) in userindex">{{item }}</li>
    </ul>
   </div>
   <div class="showletter" id="showletter" v-if="showletter">
     <div class="letter">{{letter}}</div>
   </div>
   </div>`,
 props:{
  'user-data':{
  type:array,
  default:[]
  }
 },
 data:function(){
  return {
  bmove:false,
  letter:'',
  showletter:false,
  defalutletter:"b",
  redcolorindex:0
  }
 },
 mounted () {
 
 },
 computed:{
  userindex:function(){
  return this.filterindex(this.userdata);
  }
 },methods:{
  filterindex:function(data){
  var resultindex = [];
  for(var i=0;i<data.length;i++){
   if(data[i].letter){
   resultindex.push(data[i].letter);
   }
  }
  return resultindex;
  },setlisindexpos:function(){
  var ih = document.getelementbyid('listindex').offsetheight;
  document.getelementbyid('listindex').style.margintop = - ih / 2 +"px";
  },setscroll:function(letter){
  var el = document.documentelement?document.documentelement:document.body;
  var ap = document.getelementsbytagname('p');
  var ali = document.getelementbyid('list_index').getelementsbytagname('li');
  for(var i=0;i<ap.length;i++){
   if(ap[i].innertext.tolocalestring() == letter.tolocalestring()){
   el.scrolltop = ap[i].offsettop;
   for(var j=0;j<ali.length;j++){
    if(ali[j].getattribute('data-index')==i){
    this.redcolorindex = i;
    }
   }
   }
  }
  },showbigletter:function(letter){
  var that = this;
  that.showletter = true;
  if(that.showletter){
   that.letter = letter;
   settimeout(function(){
   that.showletter = false;
   },1000)
  }
  },handlescroll:function(){     //监听滚动时，设置字母的样式
  var that = this;
  var ap = document.getelementsbytagname('p');
  var scroll = document.body.scrolltop||document.documentelement.scrolltop;
  for(var i=1;i<ap.length;i++){
   if(ap[i].offsettop<scroll) {
   this.redcolorindex = i;     //设置当前字母的样式
   if(ap[i+1].offsettop-scroll<0){
    that.showbigletter(ap[i+1].innerhtml);
   }
   }
  }
  }
 
 },ready : function(){
  this.setlisindexpos();
  (function(doc, win) {
  var docel = doc.documentelement,
   resizeevt = 'orientationchange' in window ? 'orientationchange' : 'resize',
   recalc = function() {
    var clientwidth = docel.clientwidth;
    if (!clientwidth) return;
    docel.style.fontsize = 20 * (clientwidth / 320) + 'px';
   };
  if (!doc.addeventlistener) return;
  win.addeventlistener(resizeevt, recalc, false);
  doc.addeventlistener('domcontentloaded', recalc, false);
  })(document, window);
  window.addeventlistener('scroll', this.handlescroll)
 }
 });
 
 var vm = new vue({
 el:"#app",
 data:{
  userdata:userdata
 },methods:{
 
 }
 });
 
 
 /*动态的创建alert组件，基于vue的js插件的开发*/
 var myalert = (function(){
 var defaults = {
  title:'弹窗',
  body:'',
  confirm:'',
  cancel:''
 };
 var alertel = {
  template:`<div id="alert" >
   <div class="alert_content">
   <div class="alert_title">{{alerttitle}}</div>
   <div class="alert_tel" >{{alerttel}}</div>
   <div class="alert_btn">
    <button v-if="confirm" @touchstart="confirm">确定</button>
    <button v-if="cancel" @touchstart="cancel">取消</button>
   </div>
   </div>
  </div>`
 }
 var mycomponent = vue.extend(alertel);
 
 return function(opts){
  for(var attr in opts){
  defaults[attr] = opts[attr];
  }
  var vm = new mycomponent({
  el:document.createelement('div'),
  data:{
   alerttitle:defaults.title,
   alerttel:defaults.body,
   confirm:defaults.confirm,
   cancel:defaults.cancel
  }
  })
  document.body.appendchild(vm.$el);
 }
 })();
 
 
 /*动态的创建alert组件，基于vue的js插件的开发*/
 var myletter = (function(){
 var defaults = {
  showletter:''
 };
 var alertel = {
  template:`<div class="showletter" id="showletter">
     <div class="letter">{{showletter}}</div>
   </div>`
 }
 var mycomponent = vue.extend(alertel);
 
 return function(opts){
  for(var attr in opts){
  defaults[attr] = opts[attr];
  }
  var vm = new mycomponent({
  el:document.createelement('div'),
  data:{
   showletter:defaults.showletter,
  }
  })
  document.body.appendchild(vm.$el);
 }
 })();
 
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇：苹果花茶的功效与作用，你竟然还不知道
下一篇：要不待会不知道怎么装回去
vue实现通讯录功能

Python爬虫爬取有道实现翻译功能

详解基于Vue2.0实现的移动端弹窗(Alert, Confirm, Toast)组件

ThinkPHP实现支付宝接口功能实例_PHP

php基于双向循环队列实现历史记录的前进后退等功能，队列历史记录

使用服务程序实现PHP定时执行任务功能

vue实现百度下拉列表交互操作示例

使用一行命令实现tree功能

Zend Framework实现留言本分页功能(附demo源码下载)_PHP

JS实现复制功能

JS插件clipboard.js实现一键复制粘贴功能
