angu中引入swiper實例分析

照常引入swiper相關文件，在html中粘貼swiper模板

siper的配置是須要寫在angular控制器中的

angular.module("myapp",[])
        .controller("ctl",["$scope",function(sc){
            var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
    
            // 若是須要分頁器
            pagination: '.swiper-pagination',
    
            // 若是須要前進後退按鈕
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
    
            // 若是須要滾動條
            scrollbar: '.swiper-scrollbar',
  })

            
        }])

若是slide用循環的方式建立出來：

這個時候發現不能滾動了，須要設置一個屬性observer:true，就ok了


發現還有一個小bug，每當滾動到第一張slide時都會瞬間跳過，解決方法是設置延遲

<script>
        angular.module("myapp",[])
        .controller("ctl",["$scope","$timeout",function(sc,$timeout){
            $timeout(function(){
                var mySwiper = new Swiper ('.swiper-container', {
            loop: true,
    
            // 若是須要分頁器
            pagination: '.swiper-pagination',
    
            // 若是須要前進後退按鈕
            nextButton: '.swiper-button-next',
            prevButton: '.swiper-button-prev',
    
            // 若是須要滾動條
            scrollbar: '.swiper-scrollbar',
            observer:true
  })
            })
            
        sc.slides=["1","2","3","4","5"];


        }])
    </script>

問題完美解決！