跨平台开发框架Ionic学习之路------4(使用angularjs实现滚动条定位)
2016-08-10 20:12
555 查看
在帮QQ群里面一个群友解决一个滚动条定位的过程中,碰到了一些问题并且解决了,写篇博客以备自己忘记了。解决滚动条定位有两种方式(目前我掌握的)
1、采用描标记的形式滚动到指定的区域。
需要跟html标签加上id属性。例如
$scope.toView("id"); 需要跳转到对应位置的html标签id
假如这个页面的滚动条很长,多次跳转之后就会发现页面不能上下滚动了,可能是应用标记位置之后浏览器url后面追加了##xxx=xx这样的参数导致的,如何修复不明。如有知道怎么解决的回复一下,谢谢。
2、采用修改滚动条高度。
这种方法的前提条件就是需要获取到跳转到html标签的坐标(x,y),因为只需要改变滚动条高度所以只需要获取到控件的Y轴的参数即可。
欢迎加入icon新手学习群,我们一起解决学习过程中遇到的问题。
1、采用描标记的形式滚动到指定的区域。
需要跟html标签加上id属性。例如
<div class="row item-divider" id="model1"><h2>第一模块</h2></div>然后在js脚本里面这样跳转
angular.module('todo', ['ionic']) .controller('TodoCtrl', function($scope, $location, $ionicSideMenuDelegate,
<span style="white-space:pre"> </span>$anchorScroll,$ionicScrollDelegate) { $scope.title = "项目信息"; $scope.menus = ["Search","Browse","Playlists"]; $scope.selectMenu = function (menu,index) { $scope.title = menu; $scope.toView("model"+(index+1)); $ionicSideMenuDelegate.toggleLeft(false); } $scope.toggleProjects = function() { $ionicSideMenuDelegate.toggleLeft(); }; $scope.toView = function (module) { $location.hash(module); $anchorScroll(); //移动到锚点 }; });
$scope.toView("id"); 需要跳转到对应位置的html标签id
假如这个页面的滚动条很长,多次跳转之后就会发现页面不能上下滚动了,可能是应用标记位置之后浏览器url后面追加了##xxx=xx这样的参数导致的,如何修复不明。如有知道怎么解决的回复一下,谢谢。
2、采用修改滚动条高度。
这种方法的前提条件就是需要获取到跳转到html标签的坐标(x,y),因为只需要改变滚动条高度所以只需要获取到控件的Y轴的参数即可。
var par = document.getElementById(module);//获取到控件js对象
//先转为angularjs对象然后获取对应的参数
var top = angular.element(par).prop('offsetTop');
$ionicScrollDelegate.scrollTo(0,top);//修改滚动条位置
欢迎加入icon新手学习群,我们一起解决学习过程中遇到的问题。
相关文章推荐
- 跨平台开发框架Ionic学习之路------3(使用barcodescanner扫描)
- 使用angularjs、ionic框架如何实现返回上一页并刷新
- 从今天开始学习iOS开发(iOS 7版)--实现一款App之Foundation框架的使用
- 跨平台开发框架Ionic学习之路------2
- 从今天开始学习iOS开发(iOS 7版)--实现一款App之Foundation框架的使用
- 前端学习总结(十二)ionic——媲美原生的h5跨平台移动应用开发框架
- Windows 8 Directx 开发学习笔记(十四)使用几何着色器实现三角形细分
- 【Cocos2d-X开发学习笔记】第03期:渲染框架之导演类(CCDirector)的使用
- 数据库分库分表(sharding)系列(三) 关于使用框架还是自主开发以及sharding实现层面的考量
- 【Cocos2d-X开发学习笔记】第07期:渲染框架之摄像机类(CCCamera)的使用
- android游戏开发框架libgdx的使用(十八)—简单的AVG游戏效果实现
- 【Cocos2d-X开发学习笔记】第03期:渲染框架之导演类(CCDirector)的使用
- 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——上篇
- 微软企业库5.0 学习之路——第五步、介绍EntLib.Validation模块信息、验证器的实现层级及内置的各种验证器的使用方法——中篇
- 【Cocos2d-X开发学习笔记】第05期:渲染框架之布景层类(CCLayer)的使用
- 【Cocos2d-X开发学习笔记】第08期:渲染框架之文本类的使用
- 【Cocos2d-X开发学习笔记】第02期:渲染框架之节点类(CCNode)的使用
- ACCP学习旅程之----- 使用HTML语言开发商业站点(第三章 表单和框架)
- android游戏开发框架libgdx的使用(十八)—简单的AVG游戏效果实现
- android游戏开发框架libgdx的使用(二十三)—使用Universal Tween Engine实现动画效果