我们在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. [Python Web]配置 nginx 遇到错误排查(初级)

    配置 nginx 遇到错误排查(初级) 系统版本:ubuntu 14.04,nginx 版本:nginx/1.4.6 (Ubuntu) 本文不是一步步搭建 nginx 的过程,而是我在使用 nginx ...

  2. keil5之32环境配置

    终于配置好了!!又是经过一下午加晚上的奋战,终于把环境配置好了,多亏了我强大的资料整理能力(哈哈). 真是不容易啊,本来打算放弃的,去问问别人吧.但是想想,还是靠自己吧,靠谁都不如靠自己,真是的,慢慢 ...

  3. 《阿里巴巴Java开发手册(正式版》读记

    前几天,阿里巴巴发布了<阿里巴巴Java开发手册(正式版>,第一时间下载阅读了一番. 不同于一般大厂内部的代码规范,阿里巴巴的这本Java开发手册,可谓包罗万象,几乎日常Java开发中方方 ...

  4. AJAX应用案例之省市联动

    jsp 主要是要注意多Document的操作 <%-- Created by IntelliJ IDEA. User: YuWenHui Date: 2017/4/23 0023 Time: 1 ...

  5. 篇4 安卓app自动化测试-Appium API进阶

    篇4                 安卓app自动化测试-Appium API进阶 --lamecho辣么丑 1.1概要 大家好! 我是lamecho(辣么丑),今天是<安卓app自动化测试& ...

  6. 解析PHP中常见的mongodb查询操作

    详细出处参考:http://www.jb51.net/article/38839.htm<?php// 欄位字串為$querys = array("name"=>&qu ...

  7. TOMCAT的框架结构

    Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样 ...

  8. MongoDB副本集的搭建

    副本集是mongodb提供的一种高可用解决方案.相对于原来的主从复制,副本集能自动感知primary节点的下线,并提升其中一个Secondary作为Primary. 整个过程对业务透明,同时也大大降低 ...

  9. spring-boot整合dubbo:Spring-boot-dubbo-starter

    为什么要写这个小工具 如果你用过Spring-boot来提供dubbo服务,相信使用中有很多"不爽"的地方.既然使用spring boot,那么能用注解的地方绝不用xml配置,这才 ...

  10. 如何使用.bas文件

    1. 确保你安装的是word 2010,打开word文档,,按ALT + F11打开VBE编辑器. 2.点击Normal,右键,在弹出的对话框中选择导入文件. 2. 选择需要使用的脚本的位置,然后点击 ...