解決Angular.js中使用Swiper插件不能滑動的問題
更新時間：2018年02月26日 15:44:12 作者：LLDD2014425
下面小編就為大家分享一篇解決Angular.js中使用Swiper插件不能滑動的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
我們都知道swiper是交互體驗十分好的輪播插件
但是通過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中獲取數據，要把輪播js代碼寫在獲取數據中,因為他是先獲取數據才執(zhí)行輪播的，如果你把他放在外部，實行輪播數據獲取不到。
所以解決方案便是將swiper的初始化方法放到$http請求里面執(zhí)行，
將如下代碼加到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) {
// 請求失敗執(zhí)行代碼
});
});
以上這篇解決Angular.js中使用Swiper插件不能滑動的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
關于Angularjs中自定義指令一些有價值的細節(jié)和技巧小結
這篇文章主要介紹了關于Angularjs中自定義指令一些有價值的細節(jié)和技巧小結,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了AngularJS實現Input格式化的方法,結合實例形式分析了AngularJS實現Input格式化的操作步驟與相關注意事項,需要的朋友可以參考下2016-11-11
這篇文章主要介紹了AngularJS用戶選擇器指令,結合實例形式分析了angular指令實現選擇器功能的具體操作步驟與相關實現技巧,需要的朋友可以參考下2016-11-11
下面小編就為大家?guī)硪黄狝ngularJS 購物車全選/取消全選功能的實現方法。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
這篇文章主要介紹了AngularJS頁面帶參跳轉及參數解析操作,結合具體實例形式分析了AngularJS使用URL傳遞參數及參數的接收、解析等相關操作技巧,需要的朋友可以參考下2017-06-06
對Angular.js Controller如何進行單元測試
這篇文章主要給大家介紹了如何對Angular Controller進行單頁測試。如果你不太了解angular也沒關系，本文也會提及關于Angular的一些知識。文中通過示例代碼介紹的很詳細，詳細對大家的理解和學習很有幫助，下面來一起看看吧。2016-10-10
詳解Angular4中路由Router類的跳轉navigate
這篇文章主要介紹了詳解Angular4中路由Router類的跳轉navigate，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要為大家介紹了Angular應用的多語言設置問題解決示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-07-07
下面小編就為大家?guī)硪黄狝ngularJS下對數組的對比分析。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
這篇文章主要介紹了angular 服務隨記小結,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05