IONIC----13.slide3

来源:互联网 发布:网络创业优势 编辑:程序博客网 时间:2024/06/05 10:50
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"><script src="./lib/js/ionic.bundle.min.js"></script><link rel="stylesheet" type="text/css" href="./lib/css/ionic.min.css"><title>Ionic</title><style type="text/css">ion-slide{ text-align:center;}ion-slide img{ width:100%; height:100vh}</style></head><body ng-app="myApp" ng-controller="firstController">    <ion-header-bar class="bar-positive">        <h1 class="title">active : {{index}}</h1>    </ion-header-bar>    <ion-slide-box does-continue="true" show-pager="true" auto-play="true" on-slide-changed="go_changed(index)"  active-slide="index" pager-click="go(index)">        <ion-slide>            <img src="style/img/1.jpg">        </ion-slide>        <ion-slide>            <img src="style/img/2.jpg">        </ion-slide>        <ion-slide>            <img src="style/img/3.jpg">        </ion-slide>        <ion-slide>            <img src="style/img/4.jpg">        </ion-slide>    </ion-slide-box></body><script type="text/javascript">angular.module("myApp",["ionic"]).controller("firstController",function($scope,$ionicSlideBoxDelegate){    $scope.index = 0;    $scope.go = function(index){        $ionicSlideBoxDelegate.slide(index);    }    $scope.go_changed=function(index){        console.log(index)    }});</script></html>

GITHUB

0 0
原创粉丝点击