文档章节

通讯录检索

qixuchao
 qixuchao
发布于 2017/07/07 15:35
字数 1146
阅读 3
收藏 0
点赞 0
评论 0

效果图: {F1209}

功能描述:

  1. 点击右侧字母,自动滚动到字母对应的联系人列表
  2. 按住右侧字母列表并滑动,滑动过程中,左侧联系人列表跟随滑动。

相关技术: CSS、JavaScript、JQuery

实现方法:

  1. html中对目标块设置id="slider" 和class="slider-content",并对联系人目录title设置id="{{aleph}}"
  2. 在页面加载完成后,调用function,动态生成音序列,关键代码:data-ng-init="sliderNavi()"
  3. 动态生成音序列时,根据页面高度,动态设置字母单元格高度
  4. 为每个字母绑定触摸事件,关键代码:$scope.bindEvent();
  5. 监听touchstart事件,获取当前触发事件的“字母”,并获取对应联系人目录title的偏移量,滑动到对应title处。
  6. 监听touchmove事件,获取当前触摸点的偏移量(相对于第一次按下去的位置),计算出当前触摸点对应的字母检索处的字母(根据之前设定的字母单元格高度来计算),之后同上,获取对应联系人目录title的偏移量并滑动。

注意点: touchmove事件是指,手指按住对象A之后,在屏幕滑动过程中不断触发的一个事件,需要注意的是,在滑动过程中,该事件的target element永远是触发改事件的对象A,即使滑动过程中经过了对象B,并且B上也有监听事件,也不会触发B的事件。

核心代码: html:

 <div id="slider" ng-show="showAllMan" data-ng-init="sliderNavi()" style="margin-top: 35px">
        <div class="slider-content">
            <ons-list ng-repeat="aleph in charTab" ng-init="indexAleph = $index"
                      ng-show="havaData[indexAleph]">
                <ons-list-header id="{{aleph}}" style="color: #1284ff">{{aleph}}</ons-list-header>
                <ons-list-item ng-repeat="nameList in saveChar[indexAleph] track by $index"
                               ng-click="goLinkManDetail(nameList)"  ">
                </ons-list-item>
            </ons-list>
        </div>
  </div>

JS:

// 字母滑动检索功能
    $scope.letters = new Array();
    letters = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"];
    $scope.startY = 0;
    $scope.moveY = 0;
    $scope.startLetterIndex = 0;
    $scope.currentLetterIndex = 0;
    $scope.currentLetter = "";
    $scope.letterHeight = 0;// 字母检索的高度

    function touchStartFunc(event) {
        var startletter = event.target.text;
        $scope.startLetterIndex = letters.indexOf(startletter);
        var touch = event.touches[0]; //获取第一个触点
        var y = Number(touch.pageY); //页面触点Y坐标
        startY = y;  //记录触点初始位置
        //moveY = 0; // 初始偏移量为 0

        // 移动到当前对应字母序列
        var cOffset = $('.slider-content').offset().top;// 获取偏移量
        var tOffset = $('.slider-content #' + startletter).offset().top;// 获取当前标签偏移量
        var height = $('.slider-nav').height();
        var pScroll = (tOffset - cOffset) - height / 24;
        // console.log("cOffset: " + cOffset + "   tOffset:" + tOffset + "   height:" + height + "  pScroll:" + pScroll);
        if (tOffset !== 0)  $('.slider-content').stop().animate({scrollTop: '+=' + pScroll + 'px'});


    };

    function touchMoveFunc(event) {
        event.preventDefault();//移动端touchmove只能触发一次的问题,加此代码即可连续触发了
        var touch = event.touches[0]; //获取第一个触点
        var y = Number(touch.pageY); //页面触点Y坐标
        console.log("y = " + y + "  |   startY = " + startY);
        //判断滑动方向 上下
        if ((y - startY) % $scope.letterHeight === 0) {
            currentLetterIndex = $scope.startLetterIndex + parseInt((y - startY) / $scope.letterHeight);
            $scope.currentLetter = letters[currentLetterIndex];
            console.log("currentLetter = " + $scope.currentLetter);

            var cOffset = $('.slider-content').offset().top;// 获取偏移量
            var tOffset = $('.slider-content #' + $scope.currentLetter).offset().top;// 获取当前标签偏移量
            var height = $('.slider-nav').height();
            var pScroll = (tOffset - cOffset) - height / 24;
            // console.log("cOffset: " + cOffset + "   tOffset:" + tOffset + "   height:" + height + "  pScroll:" + pScroll);
            if (tOffset !== 0)  $('.slider-content').stop().animate({scrollTop: '+=' + pScroll + 'px'});
        }
    };

    // 加监听
    $scope.bindEvent = function () {
        for (i = 0; i < letters.length; i++) {
            document.getElementById("#" + letters[i]).addEventListener('touchstart', touchStartFunc);
            document.getElementById("#" + letters[i]).addEventListener('touchmove', touchMoveFunc);
        }
    }

    $scope.isTouchDevice = function () {
        console.log("支持TouchEvent事件");
        $scope.bindEvent(); //绑定事件
    };


    $scope.sliderNavi = function (options) {
        var o = {
            items: ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"]
        };
        $(slider).append('<div class="slider-nav"><ul></ul></div>');// 加滚动条
        for (var i in o.items) $('.slider-nav ul', slider).append("<li ><a  id='#" + o.items[i] + "' alt= '#" + o.items[i] + "'>" + o.items[i] + "</a></li>");

        var height = window.innerHeight;
        $scope.letterHeight = parseInt((height - 77) / 30);// 取整,以防后续通过偏移量获取坐标时出现四舍五入不精确的情况。

        $('.slider-content, .slider-nav', slider).css('height', height - 77);
        $('.slider-nav ul li a', slider).css('height', $scope.letterHeight);
        $('.slider-nav ul li a', slider).css('width', 30);   //

        /*$('.slider-nav a', slider).mouseover(function(event) {//mouseover(function (event) {  on("scrollstart",function(){
         var target = $(this).attr('alt');
         var cOffset = $('.slider-content', slider).offset().top;// 获取偏移量
         var tOffset = $('.slider-content ' + target, slider).offset().top;// 获取当前标签偏移量
         var height = $('.slider-nav', slider).height();

         if (o.height) height = o.height;
         var pScroll = (tOffset - cOffset) - height / 30;
         console.log("cOffset: " + cOffset + "   tOffset:" + tOffset + "   height:" + height + "  pScroll:" + pScroll);
         //$('.slider-content li', slider).removeClass('selected');
         //$(target).addClass('selected');
         if (tOffset !== 0)  $('.slider-content', slider).stop().animate({scrollTop: '+=' + pScroll + 'px'});
         console.log($(this).attr('alt'));
         });*/ // 需要注释掉

        // 绑定触摸事件
        $scope.isTouchDevice();

    };

CSS:

.slider { width: 300px; min-height: 250px; display: block; position: relative; background: #fff; overflow: hidden; }
.slider ul { list-style: none; }
.slider-content { float: left; width: 100%; display: block; overflow: auto; min-height: 250px; }
.slider-content ul { list-style: none; float: left; width: 100%; display: block; position: fixed; }
.slider-content ul li {list-style-type: none; float: left; width: 100%; }
.slider-content ul ul li a { list-style-type: none;  padding: 5px 10px; display: block; border-bottom: 1px solid #f3f3f3; text-transform: capitalize; }
.slider-content ul ul li a:hover { background: #f3faff; border-color: #d5ebf9; }
.slider-content .title { padding: 5px 0; text-indent: 10px; background: #bbb; color: #fff; width: 100%; float: left; font-weight: bold; text-transform: uppercase; }
.slider-content .selected .title { background: #666; }
.slider-nav {   position: fixed; right: 0; margin-top: 0px; background: #FFFFFF; min-height: 250px;z-index:3 }
.slider-nav ul { padding: 0px 0; }
.slider-nav ul li {  list-style-type: none; text-align: center;  }
.slider-nav li a {  display: block;  list-style-type: none; font-size: 60% ; text-align: center; color: #1284ff; font-weight: bold; text-transform: uppercase; cursor: po

© 著作权归作者所有

共有 人打赏支持
qixuchao
粉丝 0
博文 5
码字总数 3405
作品 0
微信通讯录好友检索怎么实现的?

现在要实现这么个功能,检索手机的通讯录。匹配数据库中手机号的字段,如果存在,就是加为好友,如果不存在就是邀请好友,但问题是这样的搜索效率得多低呀。。加入我通讯录里有100个联系人,...

heihuzi007 ⋅ 2013/08/06 ⋅ 8

【视频教程】如何使用云图进行基于LBS开发

云图公开课由产品美女(小细腰+大长腿)和一群沉默寡言的技术大牛“联合演出”,如想知道这盘“群英荟萃”是什么滋味,那就细细欣赏我们的视频教程吧!!! Step1:使用云图可以做什么 云图是...

高德开发平台 ⋅ 2014/12/22 ⋅ 0

ActionBar中SearchView创建的2种方式

功能:查找通讯录 -- 输入关键字进行检索 效果图示例: 1、现在清单配置里添加查找联系人的 权限 READCONTACTS 2、在res下创建一个menu菜单文件夹 菜单文件夹中菜单的布局mainmenu.xml -- 2...

初来小修 ⋅ 2016/02/03 ⋅ 0

python写一个通讯录step by step V3.0

python写一个通讯录step by step V3.0 更新功能: 数据库进行数据存入和读取操作 字典配合函数调用实现switch功能 其他:函数、字典、模块调用 注意问题: 1、更优美的格式化输出 2、把日期换...

lovelace521 ⋅ 2015/04/13 ⋅ 0

Exchange Server脱机通讯录管理

Exchange中的脱机通讯簿(Offline Address Book / OAB)功能是一个很有用的功能,但是要使用OAB,必须在客户端配置拥有服务器邮箱的本地副本,或者使用个人文件夹。outlook 2003及早期版本的...

技术小胖子 ⋅ 2017/11/07 ⋅ 0

获取iPhone通讯录信息

iPhone中联系人的信息是存放在系统数据库中的。数据库中的每一笔记录都是一个ABRecordRef实例。 通讯录主要存放两种记录: 1、联系人的信息:是ABPerson类型。主要包括联系人的姓名,电话号码...

晨曦之光 ⋅ 2012/03/09 ⋅ 0

商务部公开微软持有的 Android 技术专利

微软与众多Android厂商签署了专利授权协议,但从来没有公开它持有多少项Android技术专利。出人意料的是,为了收购诺基亚手机业务,微软今年4月递交到中国商务部的文件中完整公开了它的Andro...

oschina ⋅ 2014/06/16 ⋅ 31

python写一个通讯录之step by step

编写过程: 第一步:手动代码堆积 第二步:函数复用 第三步:数据持久化之数据保存 第四步:数据持久化之数据读取 第五步:数据持久化之数据删除 第六步:数据持久化之数据更新 初稿—》数据...

lovelace521 ⋅ 2015/03/23 ⋅ 0

TurboMail邮件系统企业邮件安全使用管理方案

作为商业化邮件服务器的翘楚产品,TurboMail邮件系统致力于为企事业客户提供灵活多变的个性化企业邮箱管理方案,力求能满足不同的客户对企业邮件的各种个性化管理诉求,从而让企业邮件能满足...

月亮湖泊 ⋅ 2015/10/30 ⋅ 0

iOS中的UITableView

UITableView 基本介绍 UITableView有两种风格:UITableViewStylePlain和UITableViewStyleGrouped。这两者操作起来其实并没有本质区别,只是后者按分组样式显示前者按照普通样式显示而已。 在...

Dumplings ⋅ 2016/05/23 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Sqoop

1.Sqoop: 《=》 SQL to Hadoop 背景 1)场景:数据在RDBMS中,我们如何使用Hive或者Hadoop来进行数据分析呢? 1) RDBMS ==> Hadoop(广义) 2) Hadoop ==> RDBMS 2)原来可以通过MapReduce I...

GordonNemo ⋅ 30分钟前 ⋅ 0

全量构建和增量构建的区别

1.全量构建每次更新时都需要更新整个数据集,增量构建只对需要更新的时间范围进行更新,所以计算量会较小。 2.全量构建查询时不需要合并不同Segment,增量构建查询时需要合并不同Segment的结...

无精疯 ⋅ 41分钟前 ⋅ 0

如何将S/4HANA系统存储的图片文件用Java程序保存到本地

我在S/4HANA的事务码MM02里为Material维护图片文件作为附件: 通过如下简单的ABAP代码即可将图片文件的二进制内容读取出来: REPORT zgos_api.DATA ls_appl_object TYPE gos_s_obj.DA...

JerryWang_SAP ⋅ 59分钟前 ⋅ 0

云计算的选择悖论如何对待?

导读 人们都希望在工作和生活中有所选择。但心理学家的调查研究表明,在多种选项中进行选择并不一定会使人们更快乐,甚至不会产生更好的决策。心理学家Barry Schwartz称之为“选择悖论”。云...

问题终结者 ⋅ 今天 ⋅ 0

637. Average of Levels in Binary Tree - LeetCode

Question 637. Average of Levels in Binary Tree Solution 思路:定义一个map,层数作为key,value保存每层的元素个数和所有元素的和,遍历这个树,把map里面填值,遍历结束后,再遍历这个map,把每...

yysue ⋅ 今天 ⋅ 0

IDEA配置和使用

版本控制 svn IDEA版本控制工具不能使用 VCS-->Enable Version Control Integration File-->Settings-->Plugins 搜索Subversion,勾选SVN和Git插件 删除.idea文件夹重新生成项目 安装SVN客户......

bithup ⋅ 今天 ⋅ 0

PE格式第三讲扩展,VA,RVA,FA的概念

作者:IBinary 出处:http://www.cnblogs.com/iBinary/ 版权所有,欢迎保留原文链接进行转载:) 一丶VA概念 VA (virtual Address) 虚拟地址的意思 ,比如随便打开一个PE,找下它的虚拟地址 这边...

simpower ⋅ 今天 ⋅ 0

180623-SpringBoot之logback配置文件

SpringBoot配置logback 项目的日志配置属于比较常见的case了,之前接触和使用的都是Spring结合xml的方式,引入几个依赖,然后写个 logback.xml 配置文件即可,那么在SpringBoot中可以怎么做?...

小灰灰Blog ⋅ 今天 ⋅ 0

冒泡排序

原理:比较两个相邻的元素,将值大的元素交换至右端。 思路:依次比较相邻的两个数,将小数放在前面,大数放在后面。即在第一趟:首先比较第1个和第2个数,将小数放前,大数放后。然后比较第...

人觉非常君 ⋅ 今天 ⋅ 0

Vagrant setup

安装软件 brew cask install virtualboxbrew cask install vagrant 创建project mkdir -p mst/vmcd mst/vmvagrant init hashicorp/precise64vagrant up hashicorp/precise64是一个box......

遥借东风 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部