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 相关文章推荐
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
May 06 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
Nov 25 Javascript
jQuery图片拖动组件Dropzone用法示例
Jan 17 Javascript
js中字符型和数值型数字的互相转化方法(必看)
Apr 25 Javascript
json2.js 入门教程之使用方法与实例分析
Sep 14 Javascript
Node.js+jade+mongodb+mongoose实现爬虫分离入库与生成静态文件的方法
Sep 20 Javascript
剖析Angular Component的源码示例
Mar 23 Javascript
JavaScript中变量、指针和引用功能与操作示例
Aug 04 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
浅谈Fetch 数据交互方式
Dec 20 Javascript
原生js实现随机点名功能
Nov 05 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
PHPstorm快捷键(分享)
2017/07/17 PHP
laravel 实现设置时区的简单方法
2019/10/10 PHP
PHP实现获取文件mime类型多种方法解析
2020/05/28 PHP
JS 字符串连接[性能比较]
2009/05/10 Javascript
JAVASCRIPT模式窗口中下载文件无法接收iframe的流
2013/10/11 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
2015/04/03 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
angular和BootStrap3实现购物车功能
2017/01/25 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
python 的列表遍历删除实现代码
2020/04/12 Python
解决Python出现_warn_unsafe_extraction问题的方法
2016/03/24 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python3实现爬取指定百度贴吧页面并保存页面数据生成本地文档的方法
2018/04/22 Python
解决Python 命令行执行脚本时,提示导入的包找不到的问题
2019/01/19 Python
python scrapy爬虫代码及填坑
2019/08/12 Python
django和vue实现数据交互的方法
2019/08/21 Python
pandas中ix的使用详细讲解
2020/03/09 Python
windows支持哪个版本的python
2020/07/03 Python
安装并免费使用Pycharm专业版(学生/教师)
2020/09/24 Python
Django自带用户认证系统使用方法解析
2020/11/12 Python
Python中的面向接口编程示例详解
2021/01/17 Python
移动端html5模拟长按事件的实现方法
2018/09/30 HTML / CSS
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
医药营销专业个人自荐信
2013/09/29 职场文书
军训自我鉴定
2013/12/14 职场文书
人事行政主管岗位职责
2013/12/22 职场文书
后进生转化工作制度
2014/01/17 职场文书
观看《永远的雷锋》心得体会
2014/03/12 职场文书
工伤私了协议书范本
2014/11/24 职场文书
大学生心理健康教育心得体会
2016/01/12 职场文书
小学运动会开幕词
2016/03/04 职场文书
CSS完成视差滚动效果
2021/04/27 HTML / CSS