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":["哈爾濱銀行","?？诼摵限r村商業銀行","韓亞銀行","漢口銀行","河北銀行","恒豐銀行","衡水銀行","湖北銀行","湖州銀行","葫蘆島銀行","華夏銀行","徽商銀行"]},{"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>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
