ionic——类似通讯录的A-Z检索

image.png

首先要明确步骤：
1、页面显示出A-Z的效果（绝对定位）；
2、数据结构要适合检索（中文转拼音问题）；
3、点击相应的字母，自动到对应的位置（锚点）；
4、增加滑动事件（自定义指令）；

1）这个简单，用position（绝对定位），
*注意：代码不能写到滚动框中，不然无法定位，两种解决办法；
1、取消ion-content滚动，自己写ion-scroll，把A-Z写在ion-scroll外面；
2、直接把A-Z写到ion-content外部（之前没想到，这个感觉更好点）；

      

        
{{k}}
      
    

Css:

.initials{
      position: absolute;
      top: 0px;
      right: 0px;
      /*height: auto;*/
      height: 100%;
      width: 23px;
      padding:2px 0px;
      text-align: center;
      font-size: 12px;
      z-index: 9;
      background: #ddd;
    }

2)因为需要的是动态数据的遍历展示，所以有要把数据分组为A-Z，也就涉及到了中文问题；
数据结构：

datas:{
A:[ ],
B:[ ],
C:[ ],
.
.
Z:[ ]
}

我们得到的数据可能是混乱的，需要根据英文首字母和中文拼音首字母分组，中文转拼音：
https://my.oschina.net/tommyfok/blog/202412；
展示：

image.png

代码

//侧边A-Z
    

      

        
{{k}}
      
    
//中间显示选中了哪个字母
    

      {{bigAbc}}
    
//数据展示
    
    
      

        

          {{k}}
        
        

          
            
                {{name}}
          
        
      
    
    
  

A-Z

/*右侧检索条*/
  var az = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#';
  $scope.abc = az.split("");

3）给每个li绑定点击事件，获取点击的是哪个字母，锚点到那个字母就可以了
锚点：

image.png

事件：

$scope.selAbc = function(k){
    k = k.toLowerCase();
    for(var i in $rootScope.drivers){
      if(k == i){
        //在屏幕中间显示一个字母框
        $scope.showAbc = true;
        $scope.bigAbc = k;
        //锚点的重点
        $location.hash(k);
        $ionicScrollDelegate.anchorScroll();
      }
    }
  }

4)侧边A-Z上下滑动触发检索；
angularjs没有ng-touchmove事件，需要自定义指令，具体代码看连接；
http://www.cnblogs.com/guoyansi19900907/p/5217292.html

//滑动事件
$scope.moveAbc = function(event){
    //console.log("event:"+event);
//计算位置
    var positionX=event.pageX || event.touches[0].pageX;
    var positionY=event.pageY || event.touches[0].pageY;
    //console.log(positionX+"-"+positionY);
//位置的标签对象
    var ele = document.elementFromPoint(positionX,positionY);
    if(!ele){
      return;
    }
//是哪个字母
    var c=ele.innerText;
    if(!c || c==" " || c.length!=1){
      return;
    }
    if($scope.keepAbc != c){
      //console.log("c:"+c);
      $scope.keepAbc = c;
      //触发锚点
      $scope.selAbc($scope.keepAbc);
    }

  }
//滑动结束事件
  $scope.endAbc = function(){
    $timeout(function(){
//隐藏中间显示的字母
      $scope.showAbc = false;
      $scope.bigAbc = "";
    },500)
  }