文档章节

通讯录检索

qixuchao
 qixuchao
发布于 2017/07/07 15:35
字数 1146
阅读 3
收藏 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
6.2K
8
【视频教程】如何使用云图进行基于LBS开发

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

高德开发平台
2014/12/22
373
0
ActionBar中SearchView创建的2种方式

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

初来小修
2016/02/03
51
0
python写一个通讯录step by step V3.0

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

lovelace521
06/26
0
0
Exchange Server脱机通讯录管理

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

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

没有更多内容

加载失败,请刷新页面

加载更多

计算卷积神经网络浮点数运算量

前言 本文主要是介绍了,给定一个卷积神经网络的配置之后,如何大概估算它的浮点数运算量。 相关代码:CalFlops,基于MXNet框架的 Scala 接口实现的一个计算MXNet网络模型运算量的demo。 正文...

Ldpe2G
今天
1
0
Sql语言与MySql数据库

1. 数据库简介 1. 数据库,就是存储数据的仓库,只能通过sql语言来访问,数据库也是一个文件系统。通常,MySQL、Oracle等数据库,也被称为关系型数据库,其保存的不仅仅只是数据,还包括数据...

江左煤郎
今天
1
0
IDEA 取消自动import .*

打开设置 > Editor > Code Style > Java > Scheme Default > Imports ① 将 Class count to use import with "*" 改为 99 (导入同一个包的类超过这个数值自动变为 * ) ② 将 Names count ......

乔老哥
今天
3
0
PostGIS学习笔记(开篇)

PostGIS事实上算是笔者开始写博客的第一篇内容。而事实上那篇博文的内容并不丰富,笔者对PostGIS的了解仍然不多,然而17年在OSGeo课程学习时对PostGIS又有了进一步了解,并逐步发现它的强大。...

胖胖雕
今天
3
0
【Centos】在nginx服务器中配置php和mysql

接上一章《【Centos】利用Vultr服务器和namesilo布网》(https://my.oschina.net/u/3776619/blog/2051986),在Centos中配置好nginx,并在iptables中开启了80端口,和为了远程mysql操作方便开...

yongh701
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部