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端也用不到)