angularjs中使用轮播图指令swiper

Posted 2020-09-20 科比net

我们在angualrjs移动开发中遇到轮播图的功能

安装 swiper  npm install --save swiper   或者 bower install --save swiper

引入文件路径

<link rel="stylesheet" href="../bower_components/swiper/dist/css/swiper.min.css" />
<script src="../bower_components/swiper/dist/js/swiper.jquery.min.js"></script>

 

指令中的编写方式

(function() {
    ‘use strict‘;

    angular
        .module(‘campus.core‘)  //对应项目的module 请换成自己的模块名称
        .directive(‘swipers‘,swipers);

        swipers.$inject = [‘$timeout‘];
        function swipers($timeout) {
            return {
                restrict: "EA",
                scope: {
                    data:"="
                },
                template: ‘<div class="swiper-container silder">‘+
                                ‘<ul class="swiper-wrapper">‘+
                                ‘<li class="swiper-slide" ng-repeat="item in data">‘+
                                ‘<a class="img40" href="{{item.contentUrl}}"><img ng-src="{{item.imgId}}"  /></a>‘+
                                ‘</li>‘+
                                ‘</ul>‘+
                                ‘<div class="swiper-pagination"></div>‘+
                                ‘</div>‘,
                link: function(scope, element, attrs) {
                          $timeout(function(){
                                 var swiper = new Swiper(‘.swiper-container‘, {   //轮播图绑定样式名
                                      pagination: ‘.swiper-pagination‘,      
                                      paginationClickable: true,                
                                      autoplay: 2500,
                                });  
                         },100); 
                }
            };
        }

  

})();

data 绑定接口返回的轮播列表 vm.home.headImgs对应轮播图返回的数据列表

 <!--轮播图-->
 <swipers data="vm.home.headImgs" ></swipers>