OnSen UI结合AngularJs打造”美团"APP"附近”页面 --Hybrid App

1、页面效果图：

演示链接地址：http://www.nxl123.cn/bokeyuan/meiTuanDemo_near/

2、核心代码

near.html：

<ons-page ></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