文档章节

通讯录检索

qixuchao
 qixuchao
发布于 2017/07/07 15:35
字数 1146
阅读 5
收藏 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

© 著作权归作者所有

共有 人打赏支持
上一篇: 打android-release包
下一篇: GIT操作规范
qixuchao
粉丝 0
博文 6
码字总数 3826
作品 0
私信 提问
微信通讯录好友检索怎么实现的?

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

heihuzi007
2013/08/06
6.7K
8
【视频教程】如何使用云图进行基于LBS开发

Step1:使用云图可以做什么 云图是一款提供海量位置数据存储、检索、展现服务,帮您快速构建基于您的数据的LBS应用,自动为您的应用同步最新数据,让您的用户拥有跨平台,多终端数据一致性位...

高德开发平台
2014/12/22
417
0
python写一个通讯录step by step V3.0

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

lovelace521
2018/06/26
0
0
ActionBar中SearchView创建的2种方式

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

初来小修
2016/02/03
51
0
Exchange Server脱机通讯录管理

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

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

没有更多内容

加载失败,请刷新页面

加载更多

Windows 上安装 Scala

在安装 Scala 之前需要先安装 Java 环境,具体安装的详细方法就不在这里描述了。 您可以自行搜索我们网站中的内容获得其他网站的帮助来获得如何安装 Java 环境的方法。 接下来,我们可以从 ...

honeymose
今天
1
0
数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
3
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
5
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部