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