字母点击滚动条跳转事件(点击字母能跳到相应的位置,之后还能划回去,既能根据字母跳转,又能上下滑动)效果图如下:
当你点击索引条中的字母,比如D时,滚动条直接定位到D区,而且索引条位置不变。
下面,让我们来看看具体的实现方法吧!
我的json数据大致设计如下:(可自行设计,功能能实现就好)
{
"success":"true",
"status":0,
"school": [
{
"type": "A",
"schoolName": ["澳门大学","安庆大学","鞍山大学"]
},
{
"type": "B",
"schoolName": ["北京大学","保定大学"]
},
{
"type": "C",
"schoolName": ["成都大学","重庆大学","长沙大学"]
}
]
}
首先:在相应的控制器(controller)中写一个初始化函数(init),读出你需要的索引条字串以及相应的学校
.controller('schoolCtrl', function($anchorScroll,$scope,$http) //一些必要的注入别忘了! {
$anchorScroll.yOffset = 50; //每次操作预留50个像素,可有可无
$scope.schoolCtrl = $scope;
$scope.init = function(){
$http({
url:'json/school.json', //填入自己的URL
method:'get',
}).success(function(data){
$scope.schools_type= data.school;
}).error(function(data){
console.log(data);
});
};
$scope.init();
})
然后:将你读出的索引条和学校在页面上展示,有一个基本的样式呈现
<ion-view view-title="选择学校" hide-tabs>
<div class="row1">
<div ng-click="gotoAnchor(school_type.type)" ng-repeat="school_type in schools_type">
<div class="" style="text-align: center;font-family: initial">{{school_type.type}}<br></div> //输出索引条的字母,注意它所放的位置,要让它的位置是绝对的,不会随着你的拖动而被隐藏
</div>
</div>
<ion-content >
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="请输入学院名称">
</label>
</div>
<div class="list anchor " id="{{school.type}}" ng-repeat="school in schools_type" >
<div class="item item-divider">
{{school.type}}
</div>
<a class="item" ng-repeat="school_eve in school.schoolName" ng-model="schoolCtrl.school" >
{{school_eve}}
</a>
</div>
</ion-content>
</ion-view>
其中: {{school.type}} 即获取每一个文本的导航A,B,C…(如下图的D)
在获取相应的学校名的时候要注意json中的学校名是以数组的形式存储,即:school_eve in school.schoolName 输出{{school_eve}} 即可获取学校名。
下面是点击字母滚动条跳转的方法:gotoAnchor(school_type.type),参数school_type.type(就是把A,B…..索引条传给跳转函数)将跳转函数写入相应的controller里即可。
$scope.gotoAnchor = function (e) {
console.log(e);
var newHash = e;
if ($location.hash() !== newHash) {
$location.hash(e);
// $location.hash(old);
} else {
$anchorScroll();
// $location.hash(old);
}
}