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外部（之前没想到，这个感觉更好点）；

<div class="initials">
      <div style="margin-top:5px;width:23px;">
        <li ng-touchend="endAbc()" ng-touchmove="moveAbc($event)" ng-repeat="k in abc">{{k}}</li>
      </div>
    </div>

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

代码

<ion-content  scroll="false" id="content1" overflow-scroll="true" class="has-tabs">
//侧边A-Z
    <div class="initials">
      <div style="margin-top:5px;width:23px;">
        <li ng-touchend="endAbc()" ng-touchmove="moveAbc($event)" ng-repeat="k in abc">{{k}}</li>
      </div>
    </div>
//中间显示选中了哪个字母
    <div ng-if="showAbc" style="z-index:10;position:fixed;left:47%;top:47%;width:40px;height:40px;background:#ddd;display:flex;justify-content:center;align-items:center;font-size:20px;color:#262626;">
      {{bigAbc}}
    </div>
//数据展示
    <ion-scroll style="height: 100%;">
    <ion-list>
      <div ng-repeat="(k,data) in datas">
        <div id="{{k}}" class="item item-divider">
          {{k}}
        </div>
        <div ng-repeat="name in data">
          <ion-item  ng-click="" class="item item-light item-icon-left item-icon-right">
            <i class="icon ion-ios-gear-outline" style="color: #9e9e9e"></i>
                {{name}}
          </ion-item>
        </div>
      </div>
    </ion-list>
    </ion-scroll>
  </ion-content>

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)
  }

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

推荐阅读更多精彩内容