解决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 解析读取XML文档 实例代码
Jul 07 Javascript
jquery刷新页面的实现代码(局部及全页面刷新)
Jul 11 Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
JavaScript闭包和范围实例详解
Dec 19 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
ionic2屏幕适配实现适配手机、平板等设备的示例代码
Aug 11 Javascript
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
vue组件实现进度条效果
Jun 06 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
vue模块移动组件的实现示例
May 20 Javascript
JS代码简洁方式之函数方法详解
Jul 28 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
Apache设置虚拟WEB
2006/10/09 PHP
php函数array_merge用法一例(合并同类数组)
2013/02/03 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
PHP使用memcache缓存技术提高响应速度的方法
2014/12/26 PHP
thinkPHP交易详情查询功能详解
2016/12/02 PHP
浅谈ThinkPHP中initialize和construct的区别
2017/04/01 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
两个SUBMIT按钮,如何区分处理
2006/08/22 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
javascript常见数字进制转换实例分析
2016/04/21 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
基于JavaScript实现轮播图原理及示例
2020/04/10 Javascript
详解Angular.js数据绑定时自动转义html标签及内容
2017/03/30 Javascript
微信小程序中使用javascript 回调函数
2017/05/11 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
python 添加用户设置密码并发邮件给root用户
2016/07/25 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Django中的FBV和CBV用法详解
2019/09/15 Python
Pycharm 字体大小调整设置的方法实现
2019/09/27 Python
python自动下载图片的方法示例
2020/03/25 Python
HTML5验证以及日期显示的实现详解
2013/07/05 HTML / CSS
绘画设计学生的个人自我评价
2013/09/20 职场文书
大学新学期计划书
2014/04/28 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
学生病假条怎么写
2015/08/17 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
《认识钟表》教学反思
2016/02/16 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
Python语言规范之Pylint的详细用法
2021/06/24 Python
python中的mysql数据库LIKE操作符详解
2021/07/01 MySQL