ionic綜合+首頁右上角點選進入包含一個輪播+進入後顯示選項左上角有一個後退按鈕每個選項包含內容
阿新 • • 發佈：2019-02-03
css包建立style.css
*{ margin: 0; padding:0; } .box{ font-size: 150px; text-align: center; padding-top: 100px; color: red; } .slider{ height: 100%; } .scroll{ height: 100%; }js包建立app.js
var myapp=angular.module("myapp",["ionic"]); myapp.config(function($stateProvider,$urlRouterProvider) { $stateProvider .state('tour', { url: '/', templateUrl: 'pages/tour/tour.html', controller:"tourCtrl" }) .state('home', { url: '/home', templateUrl: 'pages/home/home.html' }).state('reservation', { url: '/reservation', templateUrl: 'pages/reservation/reservation.html', controller:"reservationCtrl" }).state('restaurant', { url: '/restaurant', templateUrl: 'pages/restaurant/restaurant.html', controller:"restaurantCtrl" }).state('weather', { url: '/weather', templateUrl: 'pages/weather/weather.html', controller:"weatherCtrl"}); $urlRouterProvider.otherwise('/') }); pages包裡建立home reservation restaurant tour weather包 home包裡建立home.html
<!-- ion-view的標題會在導航欄顯示 --> <ion-view title="選項"> <ion-content> <ion-list> <ion-item ui-sref="reservation"><i class="icon ion-clock"></i><span>我的預定</span></ion-item> <ion-item ui-sref="restaurant"><i class="icon ion-clock"></i><span>附近餐館</span></ion-item> <ion-item ui-sref="weather"><i class="icon ion-clock"></i><span>天氣查詢</span></ion-item> </ion-list> </ion-content> </ion-view>
reservation包裡建立reservation.html和reservation.js reservation.html
<ion-view title="我的預定"> <ion-content> <div class="list"> <a class="item item-icon-left"> <i class="icon ion-document-text calm"></i><span>{{data.room}}</span> </a> <a class="item item-icon-left"> <i class="icon ion-android-sunny"></i><span>{{data.checkin|date:"yyyy-MM-dd"}}</span> </a> <a class="item item-icon-left"> <i class="icon ion-fork"></i><span>{{data.checkout|date:"yyyy-MM-dd"}}</span> </a> <a class="item item-icon-left"> <i class="icon ion-fork"></i><span>{{data.wifi}}</span> </a> <a class="item item-icon-left"> <i class="icon ion-fork"></i><span>{{data.price|currency:"$"}}</span> </a> <a class="item item-icon-left"> <i class="icon ion-fork"></i><span>{{data.price*7|currency:"$"}}</span> </a> </div> </ion-content> </ion-view>
reservation.js
angular.module("myapp") .controller("reservationCtrl", function ($scope) { // 準備預訂資料-實際中應該從伺服器端請求 $scope.data = { room:"3302", checkin:new Date(), checkout:new Date(Date.now() + 7*24*60*60*1000), wifi:"hello123", price:268.00 }; });
restaurant包裡建立restaurant.html和restaurant.js
restaurant.html
<ion-view title="附近餐館"> <ion-content> <ion-list> <ion-item ng-repeat="item in data"> <h2>{{item.city}}</h2> <img ng-src="{{item.image_url}}" style="width: 100%;height: auto"> <p>{{item.name}}</p> </ion-item> <ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll> </ion-list> </ion-content> </ion-view>
restaurant.js
angular.module("myapp") .controller("restaurantCtrl", function ($scope,$http) { $scope.data=[]; $http({ url:"../restaurant.json" }).then(function(data){ $scope.data=data.data.restaurants; //console.log($scope.data); }); $scope.loadMore=function(){ $http.get('restaurant.json').success(function(items) { //console.log(items.restaurants); Array.prototype.push.apply($scope.data,items.restaurants); //console.log($scope.data); $scope.$broadcast('scroll.infiniteScrollComplete'); }); }; $scope.$on('stateChangeSuccess', function() { $scope.loadMore(); }); });
tour包裡建立tour.html和tourCtrl.js
tour.html
<!-- ion-view的標題會在導航欄顯示 --> <ion-view title="首頁"> <ion-nav-buttons side="right"> <button class="button" ui-sref="home" ng-if="show"> 進入 </button> </ion-nav-buttons> <ion-content > <ion-slide-box on-slide-changed="slideChange(index)"> <ion-slide> <div class="box blue"> <i class="icon ion-thermometer"></i><h2>{{name}}</h2> </div> </ion-slide> <ion-slide> <div class="box blue"> <i class="icon ion-cube"></i ><h2>我的預定</h2> </div> </ion-slide> <ion-slide> <div class="box blue"> <i class="icon ion-earth"></i ><h2>附近酒店</h2> </div> </ion-slide> </ion-slide-box> </ion-content> </ion-view>
tourCtrl.js
angular.module("myapp").controller("tourCtrl",function ($scope) { $scope.name="as"; $scope.show=false; $scope.slideChange=function (index) { console.log(index); if(index==2){ $scope.show=true; console.log($scope.show); }else{ $scope.show=false; console.log($scope.show); } } }) weather包裡建立weather.html和weather,js
weather.html
<ion-view title="歡迎光臨八維度假村"> <ion-content> <div class="list"> <a class="item item-icon-left" > <i class="icon ion-document-text calm"></i>天氣預報 </a> <a class="item item-icon-left" > <i class="icon ion-android-sunny"></i><p>{{items.city}}</p> </a> <a class="item item-icon-left" > <i class="icon ion-fork"></i><p>{{items.wendu}}</p> </a> <a class="item-icon-left" > <i class="icon ion-fork"></i><p>{{items.ganmao}}</p> </a> </div> </ion-content> </ion-view>
weather,js
angular.module("myapp").controller("weatherCtrl",function($scope,$http){ $http.get("http://wthrcdn.etouch.cn/weather_mini?city=北京").success(function (data) { $scope.items=data.data; console.log(data.data); }) }); restaurant.json
{
"totalPages": 30,
"currentPage": 1,
"restaurants": [
{
"id": 72253,
"name": "'Ulu Ocean Grill and Sushi Lounge",
"address": "72-100 Kaupulehu Dr.",
"city": "Kaupulehu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96740",
"country": "US",
"phone": "8083258000x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=72253",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=72253",
"image_url": "https://www.opentable.com/img/restimages/72253.jpg"
},
{
"id": 49108,
"name": "12th Ave. Grill",
"address": "1120 12th Ave",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96816",
"country": "US",
"phone": "8087329469",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=49108",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=49108",
"image_url": "https://www.opentable.com/img/restimages/49108.jpg"
},
{
"id": 92827,
"name": "53 by the Sea",
"address": "53 Ahui Street",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96813",
"country": "US",
"phone": "8085365353x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=92827",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=92827",
"image_url": "https://www.opentable.com/img/restimages/92827.jpg"
},
{
"id": 39541,
"name": "Alan Wong's Restaurant",
"address": "1857 S. King Street",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96826",
"country": "US",
"phone": "8089492526x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=39541",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=39541",
"image_url": "https://www.opentable.com/img/restimages/39541.jpg"
},
{
"id": 102163,
"name": "Aloha Beer Co.",
"address": "580 N. Nimitz Hwy.",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96817",
"country": "US",
"phone": "8085455959",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=102163",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=102163",
"image_url": "https://www.opentable.com/img/restimages/102163.jpg"
},
{
"id": 76030,
"name": "Aulii Luau",
"address": "2440 Hoonani Road",
"city": "Koloa",
"state": "HI",
"area": "Hawaii",
"postal_code": "96756",
"country": "US",
"phone": "8086341499x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=76030",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=76030",
"image_url": "https://www.opentable.com/img/restimages/76030.jpg"
},
{
"id": 13885,
"name": "Azul",
"address": "92-1001 Olani Street",
"city": "Kapolei",
"state": "HI",
"area": "Hawaii",
"postal_code": "96707",
"country": "US",
"phone": "8086790079x",
"lat": null,
"lng": null,
"price": null,
"reserve_url": "http://www.opentable.com/single.aspx?rid=13885",
"mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=13885",
"image_url": "https://www.opentable.com/img/restimages/13885.jpg"
},
{
"id": 28060,
"name": "Azure - The Royal Hawaiian",
"address": "2259 Kalakaua Avenue",
"city": "Honolulu",
"state": "HI",
"area": "Hawaii",
"postal_code": "96815",
"country":