快捷導(dǎo)航

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

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

圖片輪播在我們?nèi)粘ｉ_(kāi)發(fā)中是再熟悉不過(guò)的了，下面這篇文章主要給大家介紹了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)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章:

相關(guān)文章

Angular7中創(chuàng)建組件/自定義指令/管道的方法實(shí)例詳解
這篇文章主要介紹了在angular7中創(chuàng)建組件/自定義指令/管道的相關(guān)知識(shí)，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2019-04-04
Angular-Touch庫(kù)用法示例
這篇文章主要介紹了Angular-Touch庫(kù)用法,結(jié)合觸屏滑動(dòng)事件的實(shí)現(xiàn)為例分析了Angular-Touch庫(kù)的相關(guān)使用技巧,需要的朋友可以參考下
2016-12-12
Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問(wèn)題詳解
這篇文章主要給大家介紹了Angular2學(xué)習(xí)教程之ng中變更檢測(cè)問(wèn)題的相關(guān)資料，文中介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。
2017-05-05
AngularJS入門(mén)教程之表格實(shí)例詳解
本文主要介紹AngularJS 表格,這里給大家整理了相關(guān)知識(shí),并附代碼實(shí)例,有需要的小伙伴可以參考下
2016-07-07
AngularJS監(jiān)聽(tīng)路由變化的方法
本篇文章主要介紹了AngularJS監(jiān)聽(tīng)路由變化的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-03-03
angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗(yàn)證自定義指令實(shí)現(xiàn)代碼,需要的朋友可以參考下
2016-10-10
angularJS 指令封裝回到頂部示例詳解
本篇文章主要介紹了angularJS 指令封裝回到頂部示例詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-01-01
Angular ng-class詳解及實(shí)例代碼
這篇文章主要介紹了Angular ng-class的知識(shí)，并整理了相關(guān)資料，有興趣的小伙伴可以參考下
2016-09-09
angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決
這篇文章主要介紹了angular安裝import?echarts?from‘echarts‘標(biāo)紅報(bào)錯(cuò)解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-10-10
AngularJS基礎(chǔ) ng-include 指令示例講解
本文主要介紹AngularJS ng-include 指令,這里對(duì)ng-include 指令的知識(shí)做了詳細(xì)整理介紹,有需要的朋友可以參考下
2016-08-08