vue實(shí)現(xiàn)通訊錄功能
更新時(shí)間：2018年07月14日 10:32:03 作者：qq_35504206
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)通訊錄功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
vue實(shí)現(xiàn)手機(jī)通訊錄功能，供大家參考，具體內(nèi)容如下
<!DOCTYPE html>
<html>
<head>
<title>動(dòng)態(tài)加載組件</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">主頁(yè)</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":["包商銀行","北京農(nóng)村商業(yè)銀行","北京順義銀座村鎮(zhèn)銀行","北京銀行","渤海銀行"]},{"letter":"C","data":["滄州銀行","承德銀行","重慶農(nóng)村商業(yè)銀行","重慶黔江銀座村鎮(zhèn)銀行","重慶銀行","重慶渝北銀座村鎮(zhèn)銀行"]},{"letter":"D","data":["大連銀行","德州銀行","東莞農(nóng)村商業(yè)銀行","東亞銀行","東營(yíng)萊商村鎮(zhèn)銀行","東營(yíng)銀行"]},{"letter":"E","data":["鄂爾多斯銀行"]},{"letter":"F","data":["福建海峽銀行","福建省農(nóng)村信用社聯(lián)合社","阜新銀行","富邦華一銀行","富滇銀行"]},{"letter":"G","data":["贛州銀行","工商銀行","廣東華興銀行","廣東南粵銀行","廣東省農(nóng)村信用社聯(lián)合社","廣發(fā)銀行","廣西北部灣銀行","廣西壯族自治區(qū)農(nóng)村信用社聯(lián)合社","廣州農(nóng)村商業(yè)銀行","廣州銀行","桂林銀行"]},{"letter":"H","data":["哈爾濱銀行","?？诼?lián)合農(nóng)村商業(yè)銀行","韓亞銀行","漢口銀行","河北銀行","恒豐銀行","衡水銀行","湖北銀行","湖州銀行","葫蘆島銀行","華夏銀行","徽商銀行"]},{"letter":"J","data":["吉林銀行","濟(jì)寧銀行","嘉興銀行","建設(shè)銀行","江蘇銀行","江蘇長(zhǎng)江商業(yè)銀行","江西贛州銀座村鎮(zhèn)銀行","江西省農(nóng)村信用社聯(lián)合社","交通銀行","焦作中旅銀行","金華銀行","錦州銀行","晉城銀行","晉商銀行","九江銀行"]},{"letter":"K","data":["昆侖銀行","昆山農(nóng)村商業(yè)銀行"]},{"letter":"L","data":["萊商銀行","蘭州銀行","廊坊銀行","臨商銀行","柳州銀行","龍江銀行","洛陽(yáng)銀行"]},{"letter":"M","data":["綿陽(yáng)市商業(yè)銀行","民生銀行"]},{"letter":"N","data":["南京銀行","內(nèi)蒙古銀行","寧波通商銀行","寧波銀行","寧夏黃河農(nóng)村商業(yè)銀行","寧夏銀行","農(nóng)業(yè)銀行"]},{"letter":"P","data":["攀枝花市商業(yè)銀行","平安銀行","平頂山銀行","齊魯銀行","齊商銀行","企業(yè)銀行","青島銀行","青海銀行"]},{"letter":"Q","data":["泉州銀行"]},{"letter":"R","data":["日照銀行"]},{"letter":"S","data":["山東省農(nóng)村信用社聯(lián)合社","上海銀行","上饒銀行","紹興銀行","深圳福田銀座村鎮(zhèn)銀行","深圳農(nóng)村商業(yè)銀行","深圳前海微眾銀行","四川省農(nóng)村信用社聯(lián)合社","蘇州銀行"]},{"letter":"T","data":["臺(tái)州銀行","太倉(cāng)農(nóng)村商業(yè)銀行","天津農(nóng)村商業(yè)銀行","天津銀行"]},{"letter":"W","data":["威海市商業(yè)銀行","濰坊銀行","溫州銀行","武漢農(nóng)村商業(yè)銀行"]},{"letter":"X","data":["西安銀行","廈門(mén)國(guó)際銀行","廈門(mén)銀行","新韓銀行","邢臺(tái)銀行","興業(yè)銀行"]},{"letter":"Y","data":["煙臺(tái)銀行","營(yíng)口銀行","郵政儲(chǔ)蓄銀行","友利銀行"]},{"letter":"Z","data":["棗莊銀行","張家港農(nóng)村商業(yè)銀行","長(zhǎng)安銀行","長(zhǎng)沙銀行","招商銀行","浙江稠州商業(yè)銀行","浙江景寧銀座村鎮(zhèn)銀行","浙江民泰商業(yè)銀行","浙江三門(mén)銀座村鎮(zhèn)銀行","浙江省農(nóng)村信用社聯(lián)合社","浙江泰隆商業(yè)銀行","浙商銀行","鄭州銀行","中國(guó)銀行","中信銀行","中原銀行","珠海華潤(rùn)銀行"]}]
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:'標(biāo)題'
},
'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(){ //監(jiān)聽(tīng)滾動(dòng)時(shí)，設(shè)置字母的樣式
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; //設(shè)置當(dāng)前字母的樣式
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:{
}
});
/*動(dòng)態(tài)的創(chuàng)建alert組件，基于vue的js插件的開(kāi)發(fā)*/
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);
}
})();
/*動(dòng)態(tài)的創(chuàng)建alert組件，基于vue的js插件的開(kāi)發(fā)*/
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>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子
本篇文章主要介紹了vue-router 2.0 常用基礎(chǔ)知識(shí)點(diǎn)之導(dǎo)航鉤子，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-05-05
Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作
vue項(xiàng)目打包過(guò)后發(fā)現(xiàn)地址錯(cuò)了或者發(fā)布到別的服務(wù)器發(fā)現(xiàn)請(qǐng)求的地址不對(duì),每次都要去重新打包,太浪費(fèi)時(shí)間,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目打包后可修改基礎(chǔ)接口地址配置的具體操作,需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關(guān)于Vue中如何定義數(shù)據(jù)的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-09-09
html+vue.js 實(shí)現(xiàn)漂亮分頁(yè)功能可兼容IE
功能比較簡(jiǎn)單，在單一html中使用vue.js分頁(yè)展示數(shù)據(jù)，并未安裝腳手架，或使用相關(guān)UI框架，此時(shí)需要手寫(xiě)一個(gè)分頁(yè)器，不失為最合理最便捷的解決方案,需要的朋友可以參考下2020-11-11
vue跳轉(zhuǎn)頁(yè)簽傳參并查詢參數(shù)的保姆級(jí)教程
這篇文章主要介紹了vue跳轉(zhuǎn)頁(yè)簽傳參并查詢參數(shù)的保姆級(jí)教程,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
基于Vue框架vux組件庫(kù)實(shí)現(xiàn)上拉刷新功能
這篇文章主要為大家詳細(xì)介紹了基于Vue框架vux組件庫(kù)實(shí)現(xiàn)上拉刷新功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
今天小編就為大家分享一篇vuex存儲(chǔ)token示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module&
本文主要介紹了vue3.0運(yùn)行npm run dev報(bào)錯(cuò)Cannot find module node:url,因?yàn)槭褂玫膎ode版本是14.15.1低于15.0.0導(dǎo)致,具有一定的參考價(jià)值,感興趣的可以了解一下2023-10-10
本文主要介紹了elementUI組件el-dropdown的一些坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
vue開(kāi)發(fā)中的base和publicPath的區(qū)別
本文主要介紹了vue開(kāi)發(fā)中的base和publicPath的區(qū)別,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-07-07