vue实现通讯录功能

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>

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

(0)

相关推荐

  • Vue + better-scroll 实现移动端字母索引导航功能

    vue+ better-scroll 实现移动端歌手列表字母索引导航.算是一个学习笔记吧,写个笔记让自己了解的更加深入一点. Demo:list-view,使用 chrome 手机模式查看.换成手机模式之后,不能滑动的话,刷新一下就 OK 了. Github: 移动端字母索引导航 效果图 配置环境 因为用到的是 vue-cli 和 better-scroll,所以首先要安装 vue-cli,然后再 npm 安装better-scroll. 简单介绍一下 better-scroll: better

  • vue实现通讯录功能

    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,maxi

  • vue实现分页功能

    本文实例为大家分享了vue实现分页功能的具体代码,供大家参考,具体内容如下 使用组件分页 自己写分页 一.组件分页 <el-pagination layout="prev, pager, next" @current-change="changePageNum" :current-page="pageNum" :page-size="pageSize" :total="total"> </

  • 使用vue实现grid-layout功能实例代码

    1.先clone项目到本地. 2.git reset --hard commit 命令可以使当前head指向某个commit. 完成html的基本布局 点击复制按钮来复制整个commit id.然后在项目根路径下运行 git reset .用浏览器打开index.html来预览效果,该插件的html主要结果如下: <!-- 节点容器 --> <div class="dragrid"> <!-- 可拖拽的节点,使用translate控制位移 --> &

  • C语言实现通讯录功能

    本文实例为大家分享了C语言实现通讯录功能的具体代码,供大家参考,具体内容如下 先定义头文件 #ifndef __CONTACT_H__ #define __CONTACT_H__ #define NAME_LEN 10 #define SEX_LEN 6 #define TELE_LEN 12 #define ADDR_LEN 20 #define MAX_PEO 1000 typedef struct PEO { char name[NAME_LEN]; int age; char sex[S

  • vue实现打印功能的两种方法

    第一种方法:通过npm 安装插件 1,安装  npm install vue-print-nb --save 2,引入  安装好以后在main.js文件中引入 import Print from 'vue-print-nb' Vue.use(Print); //注册 3,现在就可以使用了 <div id="printTest" > <p>锄禾日当午</p> <p>汗滴禾下土 </p> <p>谁知盘中餐</p&

  • 100行代码实现一个vue分页组功能

    今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI.所有代码的源码可以再github上下载的到:下载地址 先来看一下实现效果: 点击查看效果 整体思路 我们先看一下使用到的文件的目录: 我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件.整体思路是通过 props 来达到组件的灵活通用的效果,整体语法是使用vue的VM语法. pageComponent.vue实现 首先实现一个分页,需要知道数

  • 一文快速详解前端框架 Vue 最强大的功能

    组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit/ $on.vuex. $parent / $children. $attrs/ $lis

  • vue实现搜索功能

    本文实例为大家分享了vue实现搜索功能的具体代码,供大家参考,具体内容如下 methods (要有一定的触发条件才能执行,如点击事件) <template> <div class="safetyInfo"> <input type="text" name="" id="" placeholder="搜索" v-model="search"/> <

  • Flutter部件内部状态管理小结之实现Vue的v-model功能

    Flutter部件内部状态管理 本文是 Flutter 部件内部状态管理的小结,从部件的基础开始,到部件的状态管理,并且在过程中实现一个类似 Vue 的 v-model 的功能. widget 基础 widget(部件) 如 React 里万物皆组件, Java 里万物皆对象, Flutter 里,能看到的一切都是 widget(部件),如按钮.文本框等等. Flutter 内部已经为我们做了一些基础的 widget ,例如: Text : 这个就是一个文本部件,里面用于放置文本 Row , C

  • 使用react context 实现vue插槽slot功能

    首先来看下vue的slot的实现 <base-layout>组件,具名插槽name定义以及默认插槽 <div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot n

随机推荐