解决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 相关文章推荐
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
Js四则运算函数代码
Jul 21 Javascript
checkbox选中与未选中判断示例
Aug 04 Javascript
jQuery实现自定义下拉列表
Jan 05 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
js倒计时简单实现方法
Dec 17 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
分享javascript、jquery实用代码段
Oct 20 Javascript
Node.js 实现简单小说爬虫实例
Nov 18 Javascript
node.js平台下的mysql数据库配置及连接
Mar 31 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
Aug 06 Javascript
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
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
社区(php&amp;&amp;mysql)三
2006/10/09 PHP
一个数据采集类
2007/02/14 PHP
CSS常用网站布局实例
2008/04/03 Javascript
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
JS实现网页顶部向下滑出的全国城市切换导航效果
2015/08/22 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
深入浅析JSON.parse()、JSON.stringify()和eval()的作用详解
2016/04/03 Javascript
jquery结合html实现中英文页面切换
2016/11/29 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
javascript获取select值的方法完整实例
2019/06/20 Javascript
localstorage实现带过期时间的缓存功能
2019/06/28 Javascript
基于Element封装一个表格组件tableList的使用方法
2020/06/29 Javascript
[00:34]TI7不朽珍藏III——地穴编织者不朽展示
2017/07/15 DOTA
Python实现从url中提取域名的几种方法
2014/09/26 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
如何在django中添加日志功能
2020/02/06 Python
python能在浏览器能运行吗
2020/06/17 Python
django models里数据表插入数据id自增操作
2020/07/15 Python
PyCharm2019.3永久激活破解详细图文教程,亲测可用(不定期更新)
2020/10/29 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
美国在线眼镜店:GlassesShop
2018/11/15 全球购物
2014客服代表实习自我鉴定
2014/09/18 职场文书
2015年医药代表工作总结
2015/04/25 职场文书
简爱电影观后感
2015/06/10 职场文书
cf战队宣传语
2015/07/13 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
Nginx的反向代理实例详解
2021/03/31 Servers
React Hook用法示例详解(6个常见hook)
2021/04/28 Javascript
Python max函数中key的用法及原理解析
2021/06/26 Python
Windows Server 2012 修改远程默认端口3389的方法
2022/04/28 Servers
VUE解决跨域问题Access to XMLHttpRequest at
2022/05/06 Vue.js