Angular.js中使用Swiper插件不能滑动的解决方案
来源:互联网 发布:高中免费听课软件 编辑:程序博客网 时间:2024/04/20 01:45
我们都知道swiper是交互体验十分好的轮播插件
但是通过angular(ng-repeat)循环出来的swiper不能轮播的解决方案
通常我们都是通过以下方法来执行:
html
<div class="swiper-container" ng-controller="swiperController"> <div class="swiper-wrapper"> <div class="swiper-slide" ng-repeat="informarion in imgSrcs"> <img ng-src="{{informarion.sliderSrc}}" /> </div> </div> <!-- Add Pagination --> <div class="swiper-pagination"></div> <!-- Add Arrows --></div>
js
var myapp=angular.module("myApp",[]); //轮播图的控制器 myapp.controller("swiperController",function($scope,$http){ //请求轮播图路径 $http({ method: 'post', url: 'json/myJson.json' }).then(function successCallback(response) { $scope.imgSrcs = response.data.sites; }, function errorCallback(response) { // 请求失败执行代码 }); });
可是还是不行,注意:如果是在json中获取数据,要把轮播js代码写在获取数据中,因为他是先获取数据才执行轮播的,如果你把他放在外部,实行轮播数据获取不到。
所以解决方案便是将swiper的初始化方法放到$http请求里面执行,
将如下代码加到function successCallback()方法里面即可实现轮播
var swiper = new Swiper('.swiper-container', {//重置轮播加载方法 pagination: '.swiper-pagination', slidesPerView: 1, paginationClickable: true, spaceBetween: 30, keyboardControl: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper });
完整的js代码如下:
var myapp=angular.module("myApp",[]); //轮播图的控制器 myapp.controller("swiperController",function($scope,$http){ //请求轮播图路径 $http({ method: 'post', url: 'json/myJson.json' }).then(function successCallback(response) { $scope.imgSrcs = response.data.sites; var swiper = new Swiper('.swiper-container', {//重置轮播加载方法 pagination: '.swiper-pagination', slidesPerView: 1, paginationClickable: true, spaceBetween: 30, keyboardControl: true, nextButton: '.swiper-button-next', prevButton: '.swiper-button-prev', observer:true,//修改swiper自己或子元素时,自动初始化swiper observeParents:true//修改swiper的父元素时,自动初始化swiper }); }, function errorCallback(response) { // 请求失败执行代码 }); });
阅读全文
0 0
- Angular.js中使用Swiper插件不能滑动的解决方案
- 使用angular和swiper做的一个滑动小插件
- 解决在angular 中swiper 不能滑动问题
- js滑动特效插件Swiper使用心得
- JS插件swiper的使用
- 自适应滑动插件swiper.js
- swiper.js插件使用
- 移动端网页触摸内容滑动js插件Swiper的使用(项目总结)
- AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
- 不错的滑动插件swiper
- swiper.js在angular里使用的一些问题
- [JS插件] Swiper:强大的触摸滑动&整屏滚动插件
- swiper.js中内容超出一屏可滑动
- Swiper 滑动插件
- swiper:前应用较广泛的移动端网页触摸内容滑动js插件
- swiper.js 图片滑动
- swiper-移动端网页触摸内容滑动js插件
- Vue项目使用swiper做轮播图时,异步调用数据时导致图片不能滑动的解决方法
- JQUERY Unit01: jQuery概述 、 jQuery选择器 、 jQuery操作DOM
- FTP文件读取以及删除(问题:xml报错、第二次读取inputstream is null等等问题)
- imgproc模块--多边形测试
- struts2 2.3.32补丁升级后出现问题(无法注入变量问题)
- css按钮样式!很漂亮!
- Angular.js中使用Swiper插件不能滑动的解决方案
- java
- 关于ng-file-upload插件反应慢的问题
- 1、Kafka简介
- 147. Insertion Sort List
- svg转成字体
- 使用unity的mesh绘制三菱柱的碰撞体(3d三角形)
- Bazel安装
- linux离线搭建Python环境及安装numpy、pandas