ionic综合+首页右上角点击进入包含一个轮播+进入后显示选项左上角有一个后退按钮每个选项包含内容
来源：互联网 发布：淘宝捉猫猫时装碎片 编辑：程序博客网 时间：2024/05/16 10:06
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.jsreservation.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.jsangular.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.jsrestaurant.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>tourCtrl.jsrestaurant.jsangular.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>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,jsweather.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,jsangular.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": "US", "phone": "8089317440x", "lat": null, "lng": null, "price": null, "reserve_url": "http://www.opentable.com/single.aspx?rid=28060", "mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=28060", "image_url": "https://www.opentable.com/img/restimages/28060.jpg" }, { "id": 87352, "name": "B's Bar & Grinds", "address": "66-197 Kamehameha Hwy", "city": "Haleiwa", "state": "HI", "area": "Hawaii", "postal_code": "96712", "country": "US", "phone": "8087444125", "lat": null, "lng": null, "price": null, "reserve_url": "http://www.opentable.com/single.aspx?rid=87352", "mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=87352", "image_url": "https://www.opentable.com/img/restimages/87352.jpg" }, { "id": 56422, "name": "Baci Bistro", "address": "30 Aulike St.", "city": "Kailua", "state": "HI", "area": "Hawaii", "postal_code": "96734", "country": "US", "phone": "8082627555", "lat": null, "lng": null, "price": null, "reserve_url": "http://www.opentable.com/single.aspx?rid=56422", "mobile_reserve_url": "http://mobile.opentable.com/opentable/?restId=56422", "image_url": "https://www.opentable.com/img/restimages/56422.jpg" } ]}
index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>Title</title> <link href="../lib/css/ionic.css" rel="stylesheet"> <script src="../lib/js/ionic.bundle.min.js"></script> <script src="js/app.js"></script> <script src="pages/reservation/reservation.js"></script> <script src="pages/restaurant/restaurant.js"></script> <script src="pages/weather/weather.js"></script> <script src="pages/tour/tourCtrl.js"></script> <link href="css/style.css" rel="stylesheet"></head><body ng-app="myapp"> <ion-nav-bar> <ion-nav-back-button class=""> <i class="ion-arrow-left-c"></i> 后退 </ion-nav-back-button> </ion-nav-bar> <ion-nav-view > <!-- 中间内容 --> </ion-nav-view></body></html>
阅读全文
0 0
- ionic综合+首页右上角点击进入包含一个轮播+进入后显示选项左上角有一个后退按钮每个选项包含内容
- 模拟御泥坊点击item进入后显示轮播图片
- 实现点击一个按钮进入指定网页
- APP首次启动：图片轮播3秒后进入首页或点击按钮进入首页（这里用的banner轮播）
- js: select一个选项包含多个值的用法
- 点击一个页面的按钮跳转到另一个页面，让不同的选项卡显示
- 有一个table表格，选中某一行后，点击“查看(button)”按钮可以实现对该行内容的显示
- 有一个table表格，选中某一行后，点击“查看(button)”按钮可以实现对该行内容的显示
- 点击按钮进入一个只能选择的页面
- ionic+做一个侧滑跳转+标题头旁边有一个后退功能的按钮
- 联系人-选项-账户-进入已添加的账户，勾选联系人，点击选项立即同步，邮件项未勾选也会显示同步
- 设置一个监听器监听多个按钮事件（点击按钮进入一个指定的网站）
- 如何点击一个图标进入一个网页
- ios 按钮控件点击后，左上角有蓝色小块
- 一个拼图游戏，包含很多内容。
- 一个点击屏幕出现侧边栏，点击里面的按钮进入下一个页面的Demo
- 一个界面里面有多个UITextField时，点击每个UITextField都会进入textFieldShouldBeginEditing delegate方法
- 重装windows系统后恢复启动选项进入ubuntu系统
- mongo 比较两个字段值是否一样
- 学习总结：JavaScript基础知识汇总
- IDEA maven变更后导致自动重置LanguageLevel和JavaCompiler版本的问题
- 【MySQL】MySQL各个版本区别及官网下载地址
- Android平台移植FFmpeg
- ionic综合+首页右上角点击进入包含一个轮播+进入后显示选项左上角有一个后退按钮每个选项包含内容
- Windows搭建Python开发环境
- koa之处理器模块化
- gif图像分解、gif图像制作
- MVP 模式简单易懂的介绍方式
- 直接选择排序
- fastdfs分布式文件系统之JAVA client工具类封装
- 两个栈实现队列
- Atitit 人工智能目前的进展与未来 包含的技术 v2 r99.docx
