解决Angular.js中使用Swiper插件不能滑动的问题


Posted in Javascript onFebruary 26, 2018

我们都知道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) {
   // 请求失败执行代码
  });
 });

以上这篇解决Angular.js中使用Swiper插件不能滑动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
jQuery:delegate中select()不起作用的解决方法(实例讲解)
Jan 26 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
前端性能优化及技巧
May 06 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
Oct 26 Javascript
微信小程序实现图片预加载组件
Jan 18 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
vuex 使用文档小结篇
Jan 11 Javascript
解决js ajax同步请求造成浏览器假死的问题
Jan 18 Javascript
Vue中实现权限控制的方法示例
Jun 07 Javascript
vite+vue3.0+ts+element-plus快速搭建项目的实现
Jun 24 Vue.js
Angular5中调用第三方js插件的方法
Feb 26 #Javascript
angular2中使用第三方js库的实例
Feb 26 #Javascript
vue 子组件向父组件传值方法
Feb 26 #Javascript
vue2 前端搜索实现示例
Feb 26 #Javascript
vue使用$emit时,父组件无法监听到子组件的事件实例
Feb 26 #Javascript
vue的全局提示框组件实例代码
Feb 26 #Javascript
Angular4 ElementRef的应用
Feb 26 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
ThinkPHP单字母函数(快捷方法)使用总结
2014/07/23 PHP
学习php中的正则表达式
2014/08/17 PHP
微信开发之网页授权获取用户信息(二)
2016/01/08 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
PHP读取Excel类文件
2017/05/15 PHP
phpwind放自动注册方法
2006/12/02 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
ThinkJS中如何使用MongoDB的CURD操作
2016/12/13 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
vue 移动端适配方案详解
2018/11/15 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
element-ui表格合并span-method的实现方法
2019/05/21 Javascript
JS中call()和apply()的功能及用法实例分析
2019/06/28 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
[02:32]【DOTA2亚洲邀请赛】iceice,梦开始的地方
2017/03/13 DOTA
python同时遍历数组的索引和值的实例
2018/11/15 Python
用python标准库difflib比较两份文件的异同详解
2018/11/16 Python
python3使用pandas获取股票数据的方法
2018/12/22 Python
python实现动态创建类的方法分析
2019/06/25 Python
python 常见的反爬虫策略
2020/09/27 Python
Wiggle中国:英国骑行、跑步、游泳 & 铁三运动装备专卖网店
2016/08/02 全球购物
Mountain Warehouse澳大利亚官网:欧洲家庭户外品牌倡导者
2016/11/20 全球购物
理肤泉英国官网:La Roche-Posay英国
2019/01/14 全球购物
优秀信贷员先进事迹
2014/01/31 职场文书
汽车维修工岗位职责
2014/02/12 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
花坛标语大全
2014/06/30 职场文书
如何写辞职书
2015/02/26 职场文书
预备党员考察表党小组意见
2015/06/01 职场文书
跑吧孩子观后感
2015/06/10 职场文书
师德师风心得体会(2016精选篇)
2016/01/12 职场文书
简历自我评价范文
2019/04/24 职场文书