首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

vue实现通讯录功能

- Author -

qq_35504206

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript 动态改变图片大小
Jun 11 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
JavaScript实现模仿桌面窗口的方法
Jul 18 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
JS排序之冒泡排序详解
Apr 08 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
May 02 Javascript
Javascript快速实现浏览器系统通知
Aug 26 Javascript
3种vue组件的书写形式
Nov 29 Javascript
js实现微信聊天界面
Aug 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
uniapp(4) Qlabel(1) capture(1) self(1) SpringBoot(22) MybatisPlus(2) JSON(10) tabBar(1) css3 (2) Normal From(1)
You might like
初次接触php抽象工厂模式(Elgg)
2010/03/21 PHP
php字符串截取函数用法分析
2014/11/25 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP删除二维数组中相同元素及数组重复值的方法示例
2017/05/05 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
探讨javascript是不是面向对象的语言
2013/11/21 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
提交按钮的name＝'submit'引起的js失效问题及原因
2015/02/25 Javascript
JavaScript获取一个范围内日期的方法
2015/04/24 Javascript
浅谈JavaScript中运算符的优先级
2015/07/07 Javascript
浅谈js使用in和hasOwnProperty获取对象属性的区别
2017/04/27 Javascript
JS实现移动端触屏拖拽功能
2018/07/31 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
基于vue循环列表时点击跳转页面的方法
2018/08/31 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
浅谈webpack 四个核心概念之Entry
2019/06/12 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
python操作mysql中文显示乱码的解决方法
2014/10/11 Python
python删除列表内容
2015/08/04 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python实现压缩和解压缩ZIP文件的方法分析
2017/09/28 Python
python3使用scrapy生成csv文件代码示例
2017/12/28 Python
Python爬虫_城市公交、地铁站点和线路数据采集实例
2018/01/10 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
JSON文件及Python对JSON文件的读写操作
2018/10/07 Python
对python中xlsx,csv以及json文件的相互转化方法详解
2018/12/25 Python
Python爬取数据保存为Json格式的代码示例
2019/04/09 Python
django中cookiecutter的使用教程
2020/12/03 Python
行政文员岗位职责
2013/11/08 职场文书
助学金感谢信
2015/01/20 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书