image.png
首先要明確步驟：
1、頁面顯示出A-Z的效果（絕對定位）鸭轮；
2垮刹、數(shù)據(jù)結(jié)構(gòu)要適合檢索（中文轉(zhuǎn)拼音問題）；
3张弛、點(diǎn)擊相應(yīng)的字母，自動到對應(yīng)的位置（錨點(diǎn)）；
4吞鸭、增加滑動事件（自定義指令）寺董；
1）這個簡單，用position（絕對定位）刻剥，
*注意：代碼不能寫到滾動框中遮咖，不然無法定位，兩種解決辦法造虏；
1御吞、取消ion-content滾動，自己寫ion-scroll漓藕，把A-Z寫在ion-scroll外面陶珠；
2、直接把A-Z寫到ion-content外部（之前沒想到享钞，這個感覺更好點(diǎn)）揍诽；
<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)因?yàn)樾枰氖莿討B(tài)數(shù)據(jù)的遍歷展示，所以有要把數(shù)據(jù)分組為A-Z栗竖，也就涉及到了中文問題暑脆；
數(shù)據(jù)結(jié)構(gòu)：
datas:{
A:[ ],
B:[ ],
C:[ ],
.
.
Z:[ ]
}
我們得到的數(shù)據(jù)可能是混亂的，需要根據(jù)英文首字母和中文拼音首字母分組狐肢，中文轉(zhuǎn)拼音：
https://my.oschina.net/tommyfok/blog/202412添吗；
展示：
image.png
代碼
<ion-content scroll="false" id="content1" overflow-scroll="true" class="has-tabs">
//側(cè)邊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>
//數(shù)據(jù)展示
<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
/*右側(cè)檢索條*/
var az = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#';
$scope.abc = az.split("");
3）給每個li綁定點(diǎn)擊事件，獲取點(diǎn)擊的是哪個字母份名，錨點(diǎn)到那個字母就可以了
錨點(diǎn)：
image.png
事件：
$scope.selAbc = function(k){
k = k.toLowerCase();
for(var i in $rootScope.drivers){
if(k == i){
//在屏幕中間顯示一個字母框
$scope.showAbc = true;
$scope.bigAbc = k;
//錨點(diǎn)的重點(diǎn)
$location.hash(k);
$ionicScrollDelegate.anchorScroll();
}
}
}
4)側(cè)邊A-Z上下滑動觸發(fā)檢索碟联；
angularjs沒有ng-touchmove事件，需要自定義指令同窘，具體代碼看連接玄帕；
http://www.cnblogs.com/guoyansi19900907/p/5217292.html
//滑動事件
$scope.moveAbc = function(event){
//console.log("event:"+event);
//計(jì)算位置
var positionX=event.pageX || event.touches[0].pageX;
var positionY=event.pageY || event.touches[0].pageY;
//console.log(positionX+"-"+positionY);
//位置的標(biāo)簽對象
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;
//觸發(fā)錨點(diǎn)
$scope.selAbc($scope.keepAbc);
}
}
//滑動結(jié)束事件
$scope.endAbc = function(){
$timeout(function(){
//隱藏中間顯示的字母
$scope.showAbc = false;
$scope.bigAbc = "";
},500)
}
