解決Angular.js中使用Swiper插件不能滑動的問題

更新時(shí)間：2018年02月26日 15:44:12 作者：LLDD2014425

下面小編就為大家分享一篇解決Angular.js中使用Swiper插件不能滑動的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧

我們都知道swiper是交互體驗(yàn)十分好的輪播插件

但是通過angular（ng-repeat）循環(huán)出來的swiper不能輪播的解決方案

通常我們都是通過以下方法來執(zhí)行：

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) {
   // 請求失敗執(zhí)行代碼
  });
 });

可是還是不行，注意：如果是在json中獲取數(shù)據(jù)，要把輪播js代碼寫在獲取數(shù)據(jù)中,因?yàn)樗窍全@取數(shù)據(jù)才執(zhí)行輪播的，如果你把他放在外部，實(shí)行輪播數(shù)據(jù)獲取不到。

所以解決方案便是將swiper的初始化方法放到$http請求里面執(zhí)行，

將如下代碼加到function successCallback（）方法里面即可實(shí)現(xiàn)輪播

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自己或子元素時(shí)，自動初始化swiper
    observeParents:true//修改swiper的父元素時(shí)，自動初始化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自己或子元素時(shí)，自動初始化swiper
    observeParents:true//修改swiper的父元素時(shí)，自動初始化swiper
   });
  }, function errorCallback(response) {
   // 請求失敗執(zhí)行代碼
  });
 });

以上這篇解決Angular.js中使用Swiper插件不能滑動的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: