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

我们都知道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" title="Angular.js">Angular.js中使用Swiper插件不能滑动的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

以上是 解决Angular.js中使用Swiper插件不能滑动的问题 的全部内容, 来源链接: utcz.com/z/313381.html

回到顶部