OnSen UI结合AngularJs打造”美团"APP"附近”页面 --Hybrid App
1、页面效果图：
演示链接地址：http://www.nxl123.cn/bokeyuan/meiTuanDemo_near/
2、核心代码
near.html：
<ons-page id="near" ng-controller="NearController">
<!--toolbar开始-->
<ons-toolbar>
<div class="left">科技创业大厦</div>
<div class="center"></div>
<div class="right">
<ons-toolbar-button>
<ons-icon icon="fa-bars">
</ons-toolbar-button>
</div>
</ons-toolbar>
<!--toolbar结束--> <!--tab开始-->
<div id="tabs">
<ons-row>
<ons-col ng-repeat="tab in nearTab" ng-class="{actived:$index == index}" ng-click="change($index)">
{{tab}}
</ons-col>
</ons-row>
</div>
<!--tab结束-->
<!--banner图开始-->
<ons-carousel fullscreen swipeable overscrollable auto-scroll ons-postchange="update()" var="carousel">
<ons-carousel-item ng-repeat="list in allLists">
<ons-scroller>
<ons-list class="near_productList" ng-repeat="item in list" class="cleanfix">
<div class="listImg">
<img src="{{item.logo}}" alt="img">
</div>
<div class="description">
<div class="title cleanfix">
<p>{{item.title}}</p>
<img src="{{item.img1}}" alt="img">
<img src="{{item.img2}}" alt="img">
</div>
<div class="star cleanfix">
<img src="{{item.img3}}" alt="img"/>
<span>￥10</span>
</div>
<div class="add cleanfix">
<p>{{item.add}}</p>
<span>{{item.space}}</span>
</div>
<div class="hand cleanfix">
<img src="{{item.img4}}" alt="img"/>
<span>{{item.sum}}</span>
</div>
<div class="line"></div>
<div class="sale">
<img src="{{item.img5}}" alt="img"/>
<span>{{item.sale}}</span>
</div>
</div>
</ons-list>
</ons-scroller>
</ons-carousel-item>
</ons-carousel>
<!--banner图结束--> </ons-page>
nearController.js：
/**
* Created by NIUXINLONG on 2018/8/3.
*/
app.controller("NearController", function ($scope) {
// $scope.name ="123";
$scope.nearTab = ["享美食", "住酒店", "爱玩乐", "全部"];
$scope.index = 0;
$scope.change = function (index) {
$scope.index = index;
carousel.setActiveCarouselItemIndex(index);
};
$scope.update = function () {
$scope.index = carousel.getActiveCarouselItemIndex();
};
$scope.allLists = [
[
{
logo: "imgs/meituan_15ab81c001a.jpg",
title: "米之乡过桥米线",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "10元/人",
add: "过桥米线｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满10减1"
},
{
logo: "imgs/meituan_15ab8530b31.jpg",
title: "巧媳妇",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "21元/人",
add: "蛋糕｜电子科技大学",
space: "189m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "14360人消费",
img5: "imgs/movie_ic_discount.png",
sale: "买一送一"
},
{
logo: "imgs/meituan_15ab858209d.jpg",
title: "阿姨奶茶",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "18元/人",
add: "奶茶｜电子科技大学",
space: "211m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "82398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减2"
},
{
logo: "imgs/meituan_15ab85a7904.jpg",
title: "罗曼CAKE",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "32元/人",
add: "蛋糕｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减3"
},
{
logo: "imgs/meituan_15ab861990e.jpg",
title: "老城街小面",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "12元/人",
add: "面食｜电子科技大学",
space: "300m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满20减5"
}
],
[
{
logo: "imgs/meituan_15ab861990e.jpg",
title: "老城街小面",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "12元/人",
add: "面食｜电子科技大学",
space: "300m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满20减5"
},
{
logo: "imgs/meituan_15ab85a7904.jpg",
title: "罗曼CAKE",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "32元/人",
add: "蛋糕｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减3"
},
{
logo: "imgs/meituan_15ab858209d.jpg",
title: "阿姨奶茶",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "18元/人",
add: "奶茶｜电子科技大学",
space: "211m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "82398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减2"
},
{
logo: "imgs/meituan_15ab8530b31.jpg",
title: "巧媳妇",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "21元/人",
add: "蛋糕｜电子科技大学",
space: "189m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "14360人消费",
img5: "imgs/movie_ic_discount.png",
sale: "买一送一"
},
{
logo: "imgs/meituan_15ab81c001a.jpg",
title: "米之乡过桥米线",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "10元/人",
add: "过桥米线｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满10减1"
}
],
[
{
logo: "imgs/meituan_15ab85a7904.jpg",
title: "罗曼CAKE",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "32元/人",
add: "蛋糕｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减3"
},
{
logo: "imgs/meituan_15ab81c001a.jpg",
title: "米之乡过桥米线",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "10元/人",
add: "过桥米线｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满10减1"
},
{
logo: "imgs/meituan_15ab8530b31.jpg",
title: "巧媳妇",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "21元/人",
add: "蛋糕｜电子科技大学",
space: "189m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "14360人消费",
img5: "imgs/movie_ic_discount.png",
sale: "买一送一"
},
{
logo: "imgs/meituan_15ab858209d.jpg",
title: "阿姨奶茶",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "18元/人",
add: "奶茶｜电子科技大学",
space: "211m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "82398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减2"
},
{
logo: "imgs/meituan_15ab861990e.jpg",
title: "老城街小面",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "12元/人",
add: "面食｜电子科技大学",
space: "300m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满20减5"
}
],
[
{
logo: "imgs/meituan_15ab8530b31.jpg",
title: "巧媳妇",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "21元/人",
add: "蛋糕｜电子科技大学",
space: "189m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "14360人消费",
img5: "imgs/movie_ic_discount.png",
sale: "买一送一"
},
{
logo: "imgs/meituan_15ab858209d.jpg",
title: "阿姨奶茶",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "18元/人",
add: "奶茶｜电子科技大学",
space: "211m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "82398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减2"
},
{
logo: "imgs/meituan_15ab85a7904.jpg",
title: "罗曼CAKE",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "32元/人",
add: "蛋糕｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满15减3"
},
{
logo: "imgs/meituan_15ab861990e.jpg",
title: "老城街小面",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "12元/人",
add: "面食｜电子科技大学",
space: "300m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满20减5"
},
{
logo: "imgs/meituan_15ab81c001a.jpg",
title: "米之乡过桥米线",
img1: "imgs/food_poi_icon_payment.png",
img2: "imgs/food_poi_icon_voucher.png",
img3: "imgs/feed_star50.png",
price: "10元/人",
add: "过桥米线｜电子科技大学",
space: "500m",
img4: "imgs/gc_joy_intserv_thumb_star_icon_pressed.png",
sum: "2398人消费",
img5: "imgs/movie_ic_discount.png",
sale: "满10减1"
}
]
];
});
3、项目相关的文件下载
http://www.nxl123.cn/files/meiTuanDemo_near.zip
OnSen UI结合AngularJs打造”美团"APP"附近”页面 --Hybrid App的更多相关文章
- OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App
1.页面效果图:(点击底部导航按钮,可切换到不同的页面) 演示地址:http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/ 2.项目目录结构 3.核 ...
- OnSen UI结合AngularJs打造”美团"APP"我的”页面 --Hybrid App
1.页面效果图: 演示地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_mine/ 2.核心代码 mine.html: <ons-page id=&quo ...
- OnSen UI结合AngularJs打造”美团"APP"逛一逛”页面 --Hybrid App
1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_walk/ 2.核心代码 walk.html: <ons-page id=&q ...
- OnSen UI结合AngularJs打造”美团"APP首页 --Hybrid Ap
1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_home/ 2.核心代码 home.html: <ons-page id=&q ...
- OnSen UI结合AngularJs打造”美团"APP"订单”页面 --Hybrid App
1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_order/ 2.核心代码 order.html: <ons-page id= ...
- 【Hybrid App】关于Hybrid App技术解决方案的选择
[引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越多 ...
- Hybrid App开发者一定不要错过的框架和工具
最近开始给网站的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下. ionicFramework 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web ...
- Hybrid App移动应用开发初探
一.移动App类型及其优缺点 1.1 Native App Native App(原生App)是用原生语言(Object-C/Java/C#/....)开发,用户需要下载安装的手机应用. 优点是 可以 ...
- hybrid app
hybrid app Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台 ...
随机推荐
- Codeforces 866C Gotta Go Fast - 动态规划 - 概率与期望 - 二分答案
You're trying to set the record on your favorite video game. The game consists of N levels, which mu ...
- libcurl 静态库编译
转载:http://www.cnblogs.com/jkcx/p/6406706.html 1.下载最新版的libcurl(官网:http://curl.haxx.se/download.html), ...
- topcoder srm 500 div1
problem1 link 如果decisions的大小为0,那么每一轮都是$N$个人.答案为0. 否则,如果答案不为0,那么概率最大的一定是一开始票数最多的人.因为这个人每一轮都在可以留下来的人群中 ...
- Oracle使用——oracle用户相关操作
前提 以dba角色登录数据库(普通用户没有操作权限):sqlplus / as sysdba 具体操作 创建用户 创建用户 使用默认表空间创建用户 create user xzgxh identifi ...
- MySQL 日期时间函数
目录 datetime和timestamp区别: timestamp类型字段特殊性: Mysql获取日期时间函数: now() curdate() curtime() Extract() last_d ...
- IDEA入门级使用教程----你怎么还在用eclipse？
http://blog.csdn.net/qq_31655965/article/details/52788374
- Java 通过get post 请求url
1️⃣.已获取小程序的access_token 为例,通过Get请求url import com.alibaba.fastjson.JSONObject; String wechatUrl = &qu ...
- Java中的异常 Exceptions
1. 概念 exception是“exceptional event”的缩写,是指执行程序中发生的事件,破坏了程序的正常执行流程.Java 异常处理机制使程序更加健壮易于调试,它可以告诉程序员三个问题 ...
- java static方法不能被重写@Override
重写方法的目的是为了多态,或者说:重写是实现多态的前提,即重写是发生在继承中且是针对非static方法的. 语法上子类允许出现和父类只有方法体不一样其他都一模一样的static方法,但是在父类引用指向 ...
- sqlserver 中常见的函数 数学函数
create table testnum( ID int identity(1,1), num float) insert testnum values (1) insert testnum valu ...