OnSen UI结合AngularJs打造”美团APP附近”页面 --Hybrid App
1、页面效果图：
演示链接地址：http://www.nxl123.cn/bokeyuan/meiTuanDemo_near/
2、核心代码
near.html：
科技创业大厦
{{tab}}
{{item.title}}
￥10
{{item.add}}
{{item.space}}
{{item.sum}}
{{item.sale}}
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
更多专业前端知识，请上 【猿2048】www.mk2048.com
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！