我们在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}}" alt="" /></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: ,
});
},);
}
};
} })();
data 绑定接口返回的轮播列表 vm.home.headImgs对应轮播图返回的数据列表
 <!--轮播图-->
<swipers data="vm.home.headImgs" ></swipers>

angularjs中使用轮播图指令swiper的更多相关文章

  1. android中广告轮播图总结

    功能点:无限轮播.指示点跟随.点击响应.实现思路: 1.指示点跟随,指示点通过代码动态添加,数量由图片数量决定. 在viewpager的页面改变监听中,设置点的状态选择器enable,当前页时,set ...

  2. js轮播图和bootstrap中的轮播图

    js中的轮播图案例: <!DOCTYPE html><html lang="en"> <head> <meta charset=" ...

  3. 利用axure软件实现app中的轮播图功能

    1.首先在axure软件中插入一张手机模型图片并调整为合适大小 2.在需要展示轮播图片位置拖入[动态面板]并且调整大小 拖入后双击动态面板,填入面板名称,并且添加面板状态(此处轮播图为三张,所以有三个 ...

  4. vue自定义轮播图组件 swiper

    1.banner 组件 components/Banner.vue <!-- 轮播图 组件 --> <template> <div class="swiper- ...

  5. AngularJS:实现轮播图效果

    实现步骤如下: 要实现这个功能,可以http://angular-ui.github.io/bootstrap/ 中的控件实现.实现步骤如下: 1. 下载ui-bootstrap.js程序http:/ ...

  6. 兼容pc端和移动端的轮播图插件 swiper.js

    swiper.js是一款纯JavaScript打造的滑动特效插件,可以用来实现检点轮播图,tab触摸滑动切换等常用效果.下载地址:https://www.swiper.com.cn/download/ ...

  7. 微信小程序轮播图组件 swiper,swiper-item及轮播图片自适应

    官网地址:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html index.wxml文件 indicator-d ...

  8. 轮播图 -- view, swiper

    效果图 制作步骤: 一.创建一个page 二.编写demo.wxml写界面元素 <!--miniprogram/pages/demo/demo.wxml--> <view class ...

  9. 轮播图插件swiper 的使用

    引入文件(注:目前版本号为Swiper3.x) <link rel="stylesheet" type="text/css" href="//s ...

随机推荐

  1. 自动化构建工具gulp简单介绍及使用

    一.简介及安装: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快 ...

  2. MySQL5.7下修改root密码

    本地安装了个mysql5.7,发现修改root密码和以往有区别了,特此记录下 进入mysql  更改密码: mysql> update mysql.user set authentication ...

  3. seajs加载angularjs

    angularjs是自动完成模块的控制的,而seajs加载模块是异步的,所以不做修改,直接seajs加载angularjs会出错.            在这里讲下自己的解决方法 一.需要把ng-ap ...

  4. CSAcademy Beta Round #3 a-game

    题目连接 a-game 大意:有一个只包含A和B的字符串,两个人分别取这个串的子串,但是每一次取不能与之前取到过的子串有交集,最后谁取到的所有串中A的总数量少的判为胜.如果一样,则为平手. 给出这样的 ...

  5. 安卓Native和H5页面进行交互

    安卓Native和H5页面进行交互 1.H5页面调用安卓Native界面 1)通过给webView添加JsInterface,安卓提供接口,让H5来进行调用    a)安卓写一个类,里面的方法需要用通 ...

  6. Linux基础网络搭建实验

    一.实验目标 利用3台虚拟机,搭建vmnet2和vmnet3两个host-only网络,实现两个网络的互联 二.实验环境   内网 外网 网关 IP 192.168.0.10/24 202.3.4.1 ...

  7. Arraylist动态扩容详解

    ArrayList 概述 ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长. ArrayList不是线程安全的,只能用在单线程环境下. 实现了Serializable接口,因此它支 ...

  8. app测试特点

    一.安装与卸载1.软件安装后是否可以正常运行:2.安装过程中是否可以中断3.安装空间不足时是否有相应的提示4.是否可以卸载应用(桌面卸载和应用卸载)二.权限测试1.扣费风险:包括发送短信.拨打电话.连 ...

  9. cctype学习

    #include <cctype>(转,归纳很好) 头文件描述: 这是一个拥有许多字符串处理函数声明的头文件,这些函数可以用来对单独字符串进行分类和转换: 其中的函数描述: 这些函数传入一 ...

  10. 一个想法照进现实-《IT连》创业项目:创业时该不该用新手程序员

    前言: 距离上一篇文章,转眼已然一个多月了,这段时间没出来和大伙汇报创业的进度,怪我了. 最近又感冒了,已经一个多星期了,还在感冒中,不过感冒也不能偷懒了,每天都有大把的事情等着我解决~~~ 不过今天 ...