关于Iscroll.js 的滑动和Angular.js路由冲突问题
Iscroll主要应用于app移动端开发。
主要代码:
window.onload=function(){
var myIscroll=new IScroll(".headerNav",{
scrollX:true
});
};
代码执行的效果图:
左右滑动导航,代码可以正常执行。
接下来 加入angular.route
<script type="text/javascript">
var app = angular.module("myCtrl", ['ngRoute']);
app.controller("test", function($scope) {});
app.config(function($routeProvider) {
$routeProvider.when('/a', {
templateUrl: "isTwo.html"
}).when('/b', {
templateUrl: "navOne.html"
}).when('/c', {
templateUrl: "navTwo.html"
}).otherwise({
redirectTo: "/a"
});
});
</script>
加入angular.route后,路由视图切换效果没有。但是Iscroll依然可以滑动,但是理想的效果没有实现。
解决的方法:
<script type="text/javascript">
var myIscroll = new IScroll(".headerNav", {
scrollX: true,
preventDefault:false
});
</script>
给iscroll对象加一个:
preventDefault:false
因为iscroll会阻止默认行为。把他的默认阻止干掉就可以了。
(pc端可以不用加,一般pc端也用不到)
关于Iscroll.js 的滑动和Angular.js路由冲突问题的更多相关文章
- Angular-chart.js 使用说明(基于angular.js工程)
Angular-chart.js是基于Chart.js的angular组件,引入项目后直接操作数据即可. 引用方法: 分别将Chart.js.angular-chart.js.angular-c ...
- jq,js简单实现类似Angular.js数据绑定效果
刚了解了下Angular.js,发现Angular.js绑定数据方面非常方便,套下教程demo: <div ng-app="myApp" ng-controller=&quo ...
- MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录
注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...
- angular.js初探
2015年7月27日 22:26:35 星期一 用在我论坛里的小栗子: 先列出来一级回帖, 点击帖子前边的"查看回复"按钮无刷新的去请求该帖子的所有回复 首先要引用js文件, 我这 ...
- 推荐 15 个 Angular.js 应用扩展指令(参考应用)
几天前我们看到Angular 1.4.0发布了-一个以社团为驱动的发布版本涵盖了400多个GitHub的提交,增加了对特性的提升,比如动画,以及可用性. 官方新闻发布稿 覆盖了绝大部分,这同样值得放于 ...
- Angular.js中的$injector服务
一 .angular中的依赖注入 angular的一个很重要的特性就是依赖注入,可以分开理解这4个字. 1.依赖: angular里面的依赖,有angular默认提供的,也有我们自己添加的.默认提供的 ...
- {{angular.js 使用技巧}} - 实现计算列属性
前端MV*框架现在有很多,其中某些框架有计算列(又叫监控属性),比如:微软推荐的 Knockout.js 和博客园司徒正美的 avalon.js 框架. 本人只使用过 Knockout.js,aval ...
- angular.js之作用域scope'@','=','&'
<!doctype html> <html ng-app='myApp'> <head> </head> <body> <script ...
- Angular.js之服务与自定义服务学习笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Android计时器 android.widget.Chronometer
说起做定时器,大家一般会想到Timer和Executors的定时器线程池,其实用这两个做都会有问题,在停止和重新计时时你回发现无法停止或者说计时加快(加快是因为多个线程在记录同一个变量),Androi ...
- F# 之旅(上)
写在前面的话 解答一下在上一篇文章<在Visual Studio中入门F#>中有人的提问, 1. 问:是准备写 F# 系列吗? 答:当然不是,本人也是刚刚学习 F#,只是翻译微软官方 ...
- 【2017-05-05】timer控件、三级联动、帐号激活权限设置
一.Timer控件 Timer实际就是一个线程控件. 属性:Enabled 是否被启用 Interval 多长时间执行一次控件中的代码 事件: Tick 事件中放要执行的代码. ...
- 初次使用git配置以及git如何使用ssh密钥(将ssh密钥添加到github)
初次安装git配置用户名和邮箱 初次安装git需要配置用户名和邮箱,否则git会提示:please tell me who you are. 你需要运行命令来配置你的用户名和邮箱: $ git con ...
- jQuery css操作
jQuery操作css的元素样式 1.访问匹配元素的样式属性 来个小案例: <div id="div" style="width:200px;height:200p ...
- JWebFileTrans(JDownload): 一款可以从网络上下载文件的小程序(三),多线程断点下载
一 前言 本篇博客是<JWebFileTrans(JDownload):一款可以从网络上下载文件的小程序>系列博客的第三篇,本篇博客的内容主要是在前两篇的基础上增加多线程的功能.简言之,本 ...
- 关于ie的h5 刷新和ctrl+5刷新 以及图标刷新的问题
最近在做一个表单验证,当表单失去焦点的时候触发错误提示. 可是..... 火狐 欧朋 刷新都没有问题,而在ie edge 用f5刷新的时候 都能记住之前的焦点 造成提示混乱. 问题算是解决: < ...
- 设计模式--代理模式(C++版)
一:代理模式简介 专业版描述:为其他对象提供一种代理以控制对这个对象的访问. 在某些情况下,一个对象不适合或者不能直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用. 戏剧性描述: ...
- Hadoop2.6.1中的Reducer实现
正在考虑怎么方便上传图片 1.Partitioner其是一个抽象类,只有一个抽象方法.其作用是对Reducer产生的中间结果进行分片,以方便将同一分组的数据交给同一个Reducer处理 2.类的继承结 ...
- JSONObjec序列化对象过滤为null的属性
@Test public void test3() { PgwReqtBody3002 pgwReqtBody3002 = new PgwReqtBody3002(); pgwReqtBody3002 ...