vue实现通讯录功能


Posted in Javascript onJuly 14, 2018

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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 撑出页面文字换行
Jun 15 Javascript
javascript 可以拖动的DIV(二)
Jun 26 Javascript
JavaScript CSS修改学习第六章 拖拽
Feb 19 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
JS实现关闭当前页而不弹出提示框的方法
Jun 22 Javascript
JavaScript每天必学之基础知识
Sep 17 Javascript
jQuery给指定的table动态添加删除行的操作方法
Oct 12 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
May 10 Javascript
node.js的Express服务器基本使用教程
Jan 09 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 #Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
Apr 21 #Javascript
微信小程序实现自上而下字幕滚动
Jul 14 #Javascript
微信小程序scroll-view实现字幕滚动
Jul 14 #Javascript
微信小程序仿RadioGroup改变样式的处理方案
Jul 13 #Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 #Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
Jul 13 #Javascript
You might like
用ODBC的分页显示
2006/10/09 PHP
PHP中$_SERVER的详细参数与说明介绍
2013/10/26 PHP
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
Java中final关键字详解
2015/08/10 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP过滤器 filter_has_var() 函数用法实例分析
2020/04/23 PHP
Javascript 日期对象Date扩展方法
2009/05/30 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
2016/06/16 Javascript
微信小程序 图片等比例缩放(图片自适应屏幕)
2016/11/16 Javascript
vue.js实现带日期星期的数字时钟功能示例
2018/08/28 Javascript
12个提高JavaScript技能的概念(小结)
2019/05/09 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
vue点击当前路由高亮小案例
2019/09/26 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
[39:18]完美世界DOTA2联赛PWL S3 Forest vs LBZS 第二场 12.17
2020/12/19 DOTA
python中nan与inf转为特定数字方法示例
2017/05/11 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
浅谈JupyterNotebook导出pdf解决中文的问题
2020/04/22 Python
python中urllib.request和requests的使用及区别详解
2020/05/05 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
汽车运用工程系毕业生自荐信
2013/12/27 职场文书
大学生创业计划书的用途
2014/01/08 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
购房个人委托书范本
2014/10/11 职场文书
学习三严三实心得体会
2014/10/13 职场文书
申报材料格式
2014/12/30 职场文书
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫