解决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 相关文章推荐
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
jquery中ajax调用json数据的使用说明
Mar 17 Javascript
js将字符串转成正则表达式的实现方法
Nov 13 Javascript
javascript html5实现表单验证
Mar 01 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
May 08 Javascript
JavaScript实现动态添加、移除元素或属性的方法分析
Jan 03 Javascript
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
vue中npm包全局安装和局部安装过程
Sep 03 Javascript
基于JavaScript实现控制下拉列表
May 08 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
如何将一个表单同时提交到两个地方处理
2006/10/09 PHP
PHP定时更新程序设计思路分享
2014/06/10 PHP
Smarty3配置及入门语法
2017/02/22 PHP
Javascript引用指针使用介绍
2012/11/07 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
js实现简单登录功能的实例代码
2013/11/09 Javascript
jquery checkbox实现单选小例
2013/11/27 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
如何解决hover在ie6中的兼容性问题
2016/12/15 Javascript
vue-cli如何快速构建vue项目
2017/04/26 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
2018/03/14 Javascript
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
Vue 使用 Mint UI 实现左滑删除效果CellSwipe
2018/04/27 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[45:50]完美世界DOTA2联赛PWL S3 CPG vs Forest 第二场 12.16
2020/12/17 DOTA
python动态监控日志内容的示例
2014/02/16 Python
Python pickle模块用法实例分析
2015/05/27 Python
python实现决策树、随机森林的简单原理
2018/03/26 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python脚本如何在bilibili中查找弹幕发送者
2020/06/04 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
Python类成员继承重写的实现
2020/09/16 Python
Jmeter调用Python脚本实现参数互相传递的实现
2021/01/22 Python
css3 border-image使用说明
2010/06/23 HTML / CSS
瑞典轮胎在线:Tirendo.se
2018/06/21 全球购物
面向对象概念面试题(.NET)
2016/11/04 面试题
一套Delphi的笔试题一
2016/02/14 面试题
建筑工程实习自我鉴定
2013/09/19 职场文书
校园达人秀策划书
2014/01/12 职场文书
乡镇网格化管理实施方案
2014/03/23 职场文书
2014副镇长民主生活会个人对照检查材料思想汇报
2014/09/30 职场文书
2016七夕情人节广告语
2016/01/28 职场文书