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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。
新闻热点
疑难解答
