Ionic + Angular.js實現(xiàn)圖片輪播的方法示例
更新時間：2017年05月21日 15:14:29 作者：lakerHQ
圖片輪播在我們?nèi)粘ｉ_發(fā)中是再熟悉不過的了，下面這篇文章主要給大家介紹了Ionic + Angular實現(xiàn)圖片輪播的方法，文中給出了詳細的示例代碼供大家參考學習，需要的朋友們下面來一起看看吧。
本文主要給大家介紹了關于Ionic + Angular實現(xiàn)圖片輪播的相關資料，分享出來供大家參考學習，需要的朋友們下面來一起看看吧。
先來看看實現(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
};
})
總結
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。
相關文章
Angular7中創(chuàng)建組件/自定義指令/管道的方法實例詳解
這篇文章主要介紹了在angular7中創(chuàng)建組件/自定義指令/管道的相關知識，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了Angular-Touch庫用法,結合觸屏滑動事件的實現(xiàn)為例分析了Angular-Touch庫的相關使用技巧,需要的朋友可以參考下2016-12-12
這篇文章主要給大家介紹了Angular2學習教程之ng中變更檢測問題的相關資料，文中介紹的非常詳細，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。2017-05-05
本文主要介紹AngularJS 表格,這里給大家整理了相關知識,并附代碼實例,有需要的小伙伴可以參考下2016-07-07
本篇文章主要介紹了AngularJS監(jiān)聽路由變化的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
angularjs 表單密碼驗證自定義指令實現(xiàn)代碼
這篇文章主要介紹了angularjs 表單密碼驗證自定義指令實現(xiàn)代碼,需要的朋友可以參考下2016-10-10
本篇文章主要介紹了angularJS 指令封裝回到頂部示例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
這篇文章主要介紹了Angular ng-class的知識，并整理了相關資料，有興趣的小伙伴可以參考下2016-09-09
angular安裝import?echarts?from‘echarts‘標紅報錯解決
這篇文章主要介紹了angular安裝import?echarts?from‘echarts‘標紅報錯解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10
本文主要介紹AngularJS ng-include 指令,這里對ng-include 指令的知識做了詳細整理介紹,有需要的朋友可以參考下2016-08-08