字母点击滚动条跳转事件
来源:互联网 发布:跳舞毯哪款最好 知乎 编辑:程序博客网 时间:2024/06/10 14:52
字母点击滚动条跳转事件(点击字母能跳到相应的位置,之后还能划回去,既能根据字母跳转,又能上下滑动)效果图如下:
当你点击索引条中的字母,比如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); } }
0 0
- 字母点击滚动条跳转事件
- 点击头部字母,滚动条跳转到相应的位置 jquery
- 通讯录右侧的字母条及其点击事件
- 状态条字母滚动效果
- 网页滚动条滚动事件
- 滚动事件判断滚动条
- jquery 滚动条事件
- 滚动条事件
- jquery 滚动条事件
- 监听滚动条事件
- 监听滚动条事件
- JQ滚动条事件
- 滚动条事件实现
- javaScript滚动条事件
- 滚动条事件
- JavaScript-滚动条事件
- 关于滚动条事件
- 滚动条事件
- addEventListener()解决传统事件绑定中去除冗余同名函数但也存在问题
- Unity Editor Window Zooming
- S4.1_Struts2_ActionAdvance 在action动作类里定义增删改方法,在struts.xml中的action method属性如何设置?
- MPI—统计完数的个数
- <sstream>—istringstream、ostringstream、stringstream类
- 字母点击滚动条跳转事件
- Nexus私服与Maven配置
- 将数据流链接到加密转换的流CryptoStream 类
- 构造数组的MaxTree
- 去除inline-block元素间间距的N种方法
- try finally没有catch的用法
- mac下使用java命令直接执行类文件(找不到或无法加载主类)
- Linux编程学习笔记1
- 网络爬虫异常文件处理