快捷導(dǎo)航

Ionic + Angular.js實(shí)現(xiàn)圖片輪播的方法示例

更新時(shí)間：2017年05月21日 15:14:29 作者：lakerHQ

圖片輪播在我們?nèi)粘ｉ_發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實(shí)現(xiàn)圖片輪播的方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。

本文主要給大家介紹了關(guān)于Ionic + Angular實(shí)現(xiàn)圖片輪播的相關(guān)資料，分享出來(lái)供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。

先來(lái)看看實(shí)現(xiàn)的效果圖：

方法示例：

template文件夾新建slider.html

<ion-view view-title="圖片輪播">
 <ion-content class="padding" scroll="false">
 <ion-slides class="slider-box" options="options" slider="data.slider">
  <ion-slide-page>
  <div class="box blue"><h1>BLUE</h1></div>
  </ion-slide-page>
  <ion-slide-page>
  <div class="box yellow"><h1>YELLOW</h1></div>
  </ion-slide-page>
  <ion-slide-page>
  <div class="box pink"><h1>PINK</h1></div>
  </ion-slide-page>
 </ion-slides>
 </ion-content>
</ion-view>

style.css

.slider-box {
 height: 300px;
}
.slider-box .box {
 width: 100%;
 height: 100%;
}
.yellow {
 background: #FFF68F;
}
.blue {
 background: #1E90FF;
}
.pink {
 background: #FF6A6A;
}

app.js:

.state('slider', {
 url: '/slider',
 views: {
 '': {
  templateUrl: 'templates/slider.html',
  controller: 'SliderCtrl'
 }
 }
})

controller.js:

.controller('SliderCtrl', function($scope) {
 $scope.settings = {
 enableFriends: true
 };
})

總結(jié)

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

Angular下H5上傳圖片的方法（可多張上傳）
本文給大家分享在使用angular上傳圖片的功能，在開發(fā)過程中遇到很多問題，最終都解決了，今天小編給大家介紹下Angular下H5上傳圖片的方法（可多張上傳),非常不錯(cuò)，需要的朋友參考下
2017-01-01
Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)點(diǎn)擊按鈕控制隱藏和顯示功能,結(jié)合實(shí)例形式分析了AngularJS簡(jiǎn)單控制頁(yè)面元素顯示與隱藏的相關(guān)操作技巧,需要的朋友可以參考下
2017-12-12
angular2 ng2-file-upload上傳示例代碼
這篇文章主要介紹了angular2 ng2-file-upload上傳示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2018-08-08
Angular實(shí)現(xiàn)跨域(搜索框的下拉列表)
angular.js 自帶jsonp，實(shí)現(xiàn)跨域，下面來(lái)實(shí)現(xiàn)搜索框的下拉列表功能，本文思路明確，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
2017-02-02
AngularJS 使用$sce控制代碼安全檢查
SCE，即strict contextual escaping,我的理解是嚴(yán)格的上下文隔離 ...翻譯的可能不準(zhǔn)確，但是通過字面理解，應(yīng)該是angularjs嚴(yán)格的控制上下文訪問，通過本文給大家介紹AngularJS 使用$sce控制代碼安全檢查，對(duì)angularjs sce相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-01-01
AngularJs動(dòng)態(tài)加載模塊和依賴注入詳解
這篇文章主要為大家介紹了AngularJs動(dòng)態(tài)加載模塊和依賴注入，感興趣的小伙伴們可以參考一下
2016-01-01
Angular 2父子組件之間共享服務(wù)通信的實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件之間共享服務(wù)通信的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-07-07
Angular2中如何使用ngx-translate進(jìn)行國(guó)際化
本篇文章主要介紹了Angular2中使用ngx-translate進(jìn)行國(guó)際化，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
詳解為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法
所謂攔截器就是在目標(biāo)達(dá)到目的地之前對(duì)其進(jìn)行處理以便處理結(jié)果更加符合我們的預(yù)期。Angular的$http攔截器是通過$httpProvider.interceptors數(shù)組定義的一組攔截器，每個(gè)攔截器都是實(shí)現(xiàn)了某些特定方法的Factory。本文就介紹了為Angular.js內(nèi)置$http服務(wù)添加攔截器的方法。
2016-12-12
angular.js + require.js構(gòu)建模塊化單頁(yè)面應(yīng)用的方法步驟
這篇文章主要給大家介紹了關(guān)于利用angular.js + require.js構(gòu)建模塊化單頁(yè)面應(yīng)用的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-07-07