angular1路由切换过程中swiper不能使用。

   问题1:在刚开始使用angular1的路由时,好多人会将swiper的初始化写在模板的父控制器上,这样会造成一个问题,swiper的初始化只在页面刚加载的时候初始化一次,在路由的切换过程中,模板虽然重新加载了,但是swiper的初始化不会再执行。因此就会造成swiper不好使。

 解决方案可以将swiper的初始化放在模板相对应的controller里面即可

 问题2:将swiper的初始化放在相对应的controller里面以后,如果还是不能用。这里的原因主要还是swiper的初始化问题

解决方案最好在swiper的初始化外面加一个一次性计时器,适当的将初始化延迟一小段时间就行,这样也能解决swiper循环播放造成的跳跃问题

下面是小demo的部分代码,大家可以参考一下!

index.html
 <div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" ng-repeat="i in imgs">
<img ng-src="{{i}}"/>
</div>
</div>
<div class="swiper-pagination"> </div>
</div>

swiper的html模板

 app.controller("ctrl1",["$scope","$timeout",function($scope,$timeout){
$scope.imgs = [
"img/banner1.jpg",
"img/banner2.jpg",
"img/banner3.jpg"
]; $timeout(function(){
new Swiper(".swiper-container",{
pagination:".swiper-pagination",
loop:true,
/*
启动动态检查器(OB/观众/观看者),当改变swiper的样式(例如隐藏/显示)或者修改swiper的子元素时,自动初始化swiper。
默认false
此属性也能解决swiper的初始化问题,但是在loop属性开启的情况下,有轮播跳跃问题。
* */
// obverser:true
});
},100); }]);

swiper模板对应的controller

angular1与swiper的更多相关文章

  1. angular1.x的简单介绍 (一)

    angular1.x作为经典的mvc框架,可以创建能够复用的组件,也可进行双向数据绑定.国内的vue.js/avaloon.js都是同类型的框架.适合使用angularjs的项目有大型信息化管理系统: ...

  2. swiper插件 纵向内容超出一屏解决办法

    1.css .swiper-slide { overflow: auto; } 2.js var swiper = new Swiper('.swiper-container', { directio ...

  3. swiper的初步使用

    1.引入文件,顺序引入(此处基于jquery,且版本至少1.7以上) <link rel="stylesheet" href="path/to/swiper-3.4 ...

  4. Angular1还是Angular2

    Angular1还是Angular2 学完angular1,尝试去看了下angular2,虽然号称更强更快,可是这基于ES6和TypeScript的全新框架让人完全招架不住,而且我只是需要angula ...

  5. 关于移动端swiper的2种样式重置

    手机查看效果地址:猛戳 ,PC端查看可以缩放浏览器窗口看效果~~ 思路:主要考虑选择器优先级大于默认就可以随意撸码 注意:该demo里用的mobile-adaptive.js是让页面以rem自适应,也 ...

  6. ReactNative新手学习之路04 组件化开发轮播图swiper支持安卓和IOS

    react native 新手之路04 组件化开发轮播图swiper支持安卓和IOS npm install react-native-carousel --save git 地址Properties ...

  7. swiper框架,实现轮播图等滑动效果

    http://www.swiper.com.cn/ 做个记录而已,这个没什么好说的,对于需要手机端开发实现触摸等方式可以看看.

  8. swiper.animate~之~可以执行两种动画的升级版的Swiper Animate

        1.下载插件swiper.animate-twice.min.js,加载进页面. <!DOCTYPE html> <html> <head> ... < ...

  9. swiper横向轮播--3d

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

随机推荐

  1. 201521123098 《Java程序设计》第9周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常相关内容. 1. 在catch时需要考虑各个异常的继承关系,存在继承关系时需要先把子类异常的catch放在前面: 2. 当try ...

  2. 201521123044 《Java程序设计》第11周学习总结

    1. 本章学习总结 2. 书面作业 本次PTA作业题集多线程 1.互斥访问与同步访问 完成题集4-4(互斥访问)与4-5(同步访问) 1.1 除了使用synchronized修饰方法实现互斥同步访问, ...

  3. Java:类类型变量

    在java中有一种被称为类类型的变量,它不同于基本类型变量存储值的方式.不管是基本变量还是类类型变量,都实现为一个内存位置.但是,由于基本变量所需的内存数量是相同的,所以系统可以给它设置一个固定的空间 ...

  4. MinHook测试与分析(x86下 E8,E9,EB,CALL指令测试,且逆推测试微软热补丁)

    依稀记得第一次接触Hook的概念是在周伟民先生的书中-><<多任务下的数据结构与算法>>,当时觉得Hook的本质就是拦截,就算到现在也是如此认为. 本篇文章是在x86下测 ...

  5. SpringMVC第五篇【方法返回值、数据回显、idea下配置虚拟目录、文件上传】

    Controller方法返回值 Controller方法的返回值其实就几种类型,我们来总结一下-. void String ModelAndView redirect重定向 forward转发 数据回 ...

  6. SpringMVC第一篇【介绍、入门、工作流程、控制器】

    什么是SpringMVC? SpringMVC是Spring家族的一员,Spring是将现在开发中流行的组件进行组合而成的一个框架!它用在基于MVC的表现层开发,类似于struts2框架 为什么要使用 ...

  7. Spring02-AOP

    1,动态代理,指的是通过一个代理对象创建需要的业务对象,然后在这个代理对象中统一进行各种操作. 步骤: 1)写一个类实现InvocationHandler接口: 2)创建要代理的对象 2,创建一个简单 ...

  8. 工作中对数组的一些处理,整理(结合underscore.js)

    1.数组里边相同元素提取成map,并以'',''分隔 例如:var arr = [{a:"xx",b:''xxx''},{a:"xxx",b:''xxxxx'' ...

  9. 简单实用的CSS网页布局中文排版技巧

    由于汉字的特殊性,在css网页布局中,中文排版有别于英文排版.排版是一个麻烦的问题,小编认为,作为一个优秀的网页设计师和网页制作人员,掌握一些简单的中文排版技巧是不可或缺的,所以今天特意总结了几个简单 ...

  10. AngularJS -- Bootstrap(启动器)

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) 这章介绍了Angular的初始化过程,以及如何在必要的时候 ...