文档章节

通讯录检索

qixuchao
 qixuchao
发布于 2017/07/07 15:35
字数 1146
阅读 4
收藏 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
博文 5
码字总数 3405
作品 0
私信 提问
微信通讯录好友检索怎么实现的?

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

heihuzi007
2013/08/06
6.2K
8
ActionBar中SearchView创建的2种方式

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

初来小修
2016/02/03
51
0
【视频教程】如何使用云图进行基于LBS开发

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

高德开发平台
2014/12/22
373
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

没有更多内容

加载失败,请刷新页面

加载更多

React和Redux的连接react-redux

通过Redux文档来了解react-redux,在一段时间的实践后准备翻一翻源代码,顺便做些相关的总结。我看的代码的npm版本为v4.0.0,也就是说使用的React版本是0.14.x。 react-redux提供两个关键模块...

前端攻城老湿
42分钟前
1
0
1、Mybatis连接池配置 和 Context.xml的配置

注意: (1)mybatis 3.2 之前 通过 set get 方法 获取相关属性。之后通过属性姓名获取相关关联。 (2)mybatis 映射 优先为 sql 语句中的别名与实体类的属性进行映射。 (3)jndi Java用于调...

KingFightingAn
58分钟前
1
0
Android 界面漩涡扭曲动效实现

背景:之前偶然看到优酷有类似的页面切换动画效果。于是自己也打算来实现下这样的效果。 动效说明:点击界面中的任意位置,界面以点击位置作为中心点,开始以漩涡状态,扭曲,收缩。直到消失...

Carlyle_Lee
今天
2
0
聊聊我怎么系统学习Linux技能并快速提高的

聊聊我怎么系统学习Linux技能并快速提高的 随着电子信息科技时代的发展,学会使用计算机在我们的生活中成为了必不可少的一项技能。而作为计算机中的三大操作系统之一的Linux更是饱受计算机爱...

linuxCool
今天
6
0
Android/Java 获取一个byte[]的真实编码,用于解决乱码问题

来源地址:https://blog.csdn.net/qq_31384551/article/details/81627840 一个byte数组,byte[] buf,是由一个字符串转换来的,如何判断字符串使用的是什么编码? Mozilla的一个组件提供了相应...

她叫我小渝
今天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部