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