首页
所有分类
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 相关文章推荐
JS实现切换标签页效果实例代码
Nov 01 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
基于Jquery代码实现手风琴菜单
Nov 19 Javascript
Bootstrap使用基础教程详解
Sep 05 Javascript
JS实现隔行换色的表格排序
Mar 27 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
AngularJS日期格式化常见操作实例分析
May 17 Javascript
Vue数据双向绑定原理及简单实现方法
May 18 Javascript
vue.draggable实现表格拖拽排序效果
Dec 01 Javascript
jQuery对底部导航进行跳转并高亮显示的实例代码
Apr 23 jQuery
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
浅析vue-router中params和query的区别
Dec 24 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
sout(1) macos(1) CAD(1) 403(1) 404(1) xps(1) XPathParser(1) Stater(1) Sentry(1) csgo(1)
You might like
PHP之COOKIE支持详解
2010/09/20 PHP
php若干单维数组遍历方法的比较
2011/09/20 PHP
PHP中的替代语法介绍
2015/01/09 PHP
微信自定义菜单的创建/查询/取消php示例代码
2016/08/05 PHP
详解PHP归并排序的实现
2016/10/18 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
2011/04/27 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
jQuery实现二级下拉菜单效果
2016/01/05 Javascript
JavaScript数据结构与算法之集合(Set)
2016/01/29 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
2016/05/05 Javascript
jquery获取复选框checkbox的值的简单实现方法
2016/05/26 Javascript
详解vee-validate的使用个人小结
2017/06/07 Javascript
深究AngularJS中$sce的使用
2017/06/12 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
Windows下Node.js安装及环境配置方法
2017/09/18 Javascript
bootstrap日期插件daterangepicker使用详解
2017/10/19 Javascript
Vue.js 2.x之组件的定义和注册图文详解
2018/06/19 Javascript
vue-cli项目中使用echarts图表实例
2018/10/22 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python中获取对象信息的方法
2015/04/27 Python
Python绘制热力图示例
2019/09/27 Python
tensorflow通过模型文件,使用tensorboard查看其模型图Graph方式
2020/01/23 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
利用Python函数实现一个万历表完整示例
2021/01/23 Python
Expedia丹麦：全球领先的旅游网站
2018/03/18 全球购物
介绍一下write命令
2012/09/24 面试题
就业自荐信
2013/12/04 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
《画》教学反思
2014/04/14 职场文书
教师求职信怎么写
2015/03/20 职场文书
MySQL基础（一）
2021/04/05 MySQL