本文主要給大家介紹了關于Ionic + Angular實現圖片輪播的相關資料，分享出來供大家參考學習，需要的朋友們下面來一起看看吧。
先來看看實現的效果圖：
方法示例：
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 };})總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對武林網的支持。
新聞熱點
疑難解答
