使用ionic播放轮询广告的实现方法(必看)

2019-11-19 16:45:35

字体：大中小

来源：转载

供稿：网友

使用ionic中的ion-slide-box实现，下面是完整的代码示例：

<!DOCTYPE html><html ng-app="app"><head>  <meta charset="utf-8">  <title>ionic-demo</title>  <link href="../lib/ionic/css/ionic.css" rel="external nofollow" rel="stylesheet">  <script type="text/javascript" src="../lib/ionic/js/ionic.bundle.js" charset="utf-8"></script>    <style type="text/css">  div.box{    width: 100%;    height: 320px;  }  div.box > img{    width: 100%;    height: 100%;  }  </style>  </head><body ng-controller="ctrl">    <ion-view>     <ion-content>     <ion-slide-box on-slide-changed="slideHasChanged($index)" auto-play="true" does-continue="true" slide-interval=2000 show-pager="true" pager-click="pageClick(index)" active-slide="model.activeIndex" delegate-handle="delegateHandler">     <ion-slide>      <div class="box blue" ui-sref="list" >       <img src="https://d2.sinaimg.cn/pfpghc2/201609/28/a77021386e764fc4828ea33ccd1ad864.jpg">      </div>     </ion-slide>     <ion-slide>      <div class="box yellow">       <img src="https://ks.sinaimg.cn/n/news/20161003/j1TZ-fxwkzyh4142724.jpg/w640h320z1l50t1c70.jpg">      </div>     </ion-slide>     <ion-slide>      <div class="box pink">       <img src="https://ks.sinaimg.cn/n/news/20161003/d-TL-fxwkzym7587820.jpg/w640h320z1l50t18b4.jpg">      </div>     </ion-slide>    </ion-slide-box>     </ion-content>      </ion-view>    <script type="text/javascript">  var app = angular.module('app',['ionic']);    app.controller('ctrl', function($scope,$ionicSlideBoxDelegate,$state) {    //为了验证属性active-slide定义的模型，angularjs是mvc模式     $scope.model = {      activeIndex:1     };    //此事件对应的是pager-click属性，当显示图片是有对应数量的小圆点，这是小圆点的点击事件     $scope.pageClick = function(index){      $scope.model.activeIndex = 2;     };    //当图片切换后，触发此事件     $scope.slideHasChanged = function($index){     };     //这是属性delegate-handle的验证使用的，其实没必要重定义，直接使用$ionicSlideBoxDelegate就可以     $scope.delegateHandle = $ionicSlideBoxDelegate;  })  </script></body></html>

以上这篇使用ionic播放轮询广告的实现方法(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持武林网。

上一篇：老生常谈angularjs中的$state.go

下一篇：详谈angularjs中路由页面强制更新的问题