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的更多相关文章

  1. OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App

    1.页面效果图:(点击底部导航按钮,可切换到不同的页面) 演示地址:http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/ 2.项目目录结构 3.核 ...

  2. OnSen UI结合AngularJs打造”美团"APP"我的”页面 --Hybrid App

    1.页面效果图: 演示地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_mine/ 2.核心代码 mine.html: <ons-page id=&quo ...

  3. OnSen UI结合AngularJs打造”美团"APP"逛一逛”页面 --Hybrid App

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_walk/ 2.核心代码 walk.html: <ons-page id=&q ...

  4. OnSen UI结合AngularJs打造”美团"APP首页 --Hybrid Ap

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_home/ 2.核心代码 home.html: <ons-page id=&q ...

  5. OnSen UI结合AngularJs打造”美团"APP"订单”页面 --Hybrid App

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_order/ 2.核心代码 order.html: <ons-page id= ...

  6. 【Hybrid App】关于Hybrid App技术解决方案的选择

    [引言]近年来随着移动设备类型的变多,操作系统的变多,用户需求的增加,对于每个项目启动前,大家都会考虑到的成本,团队成员,技术成熟度,时间,项目需求等一堆的因素.因此,开发App的方案已经变得越来越多 ...

  7. Hybrid App开发者一定不要错过的框架和工具

    最近开始给网站的移动版本做技术选型,发现了很多好玩的东西,写出来给大家分享下. ionicFramework 我是hybrid app的忠实粉丝和大力倡导者,从 新浪移动云开始就不断的寻找能帮助Web ...

  8. Hybrid App移动应用开发初探

    一.移动App类型及其优缺点 1.1 Native App Native App(原生App)是用原生语言(Object-C/Java/C#/....)开发,用户需要下载安装的手机应用. 优点是 可以 ...

  9. hybrid app

    hybrid app Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台 ...

随机推荐

  1. 一、变量.二、过滤器(filter).三、标签(tag).四、条件分支tag.五、迭代器tag.六、自定义过滤器与标签.七、全系统过滤器（了解）

    一.变量 ''' 1.视图函数可以通过两种方式将变量传递给模板页面 -- render(request, 'test_page.html', {'变量key1': '变量值1', ..., '变量ke ...

  2. python --- 08 文件操作

    一.   文件 f = open(文件路径,mode = '模式',encoding = '编码格式') 1.基础 ① 读写时,主要看光标的位置 ②操作完成要写    f.close( ) f.flu ...

  3. 设置Eclipse具有字母自动联想

    Window->Preferences->Java->Editor->ContentAssist(内容助手)里面的Enable auto activation里面第二行再加上a ...

  4. Linux 字符设备驱动开发基础（二）—— 编写简单 PWM 设备驱动【转】

    本文转载自:https://blog.csdn.net/zqixiao_09/article/details/50858776 版权声明:本文为博主原创文章,未经博主允许不得转载.    https: ...

  5. fedora23安装搜狗輸入法?

    1, 安裝方法, 是通過下載 repo文件, 添加repo文件, 然後通過dnf啦安裝的. repo文件地址是: fedora 的中文社區: https://www.fdzh.org/ fdzh: 就 ...

  6. （转）Jenkins持续集成

    (二期)14.持续集成工具jenkins [课程14]持续集...概念.xmind0.6MB [课程14]持续集成...kins.xmind43.3KB [课程14预习]持续...kins.xmind ...

  7. 【server.properties】kafka服务设置

    每个kafka broker中配置文件server.properties默认必须配置的属性如下: broker.id=0 num.network.threads=2 num.io.threads=8 ...

  8. 论文笔记：Capsules for Object Segmentation

    Capsules for Object Segmentation 2018-04-16  21:49:14 Introduction: ----

  9. （转）Is attacking machine learning easier than defending it?

    转自:http://www.cleverhans.io/security/privacy/ml/2017/02/15/why-attacking-machine-learning-is-easier- ...

  10. Balloons

    题目链接:http://acm.sdibt.edu.cn/JudgeOnline/problem.php?id=2401 类似求连通块的问题,可以参考紫书(P162 油田),对这两个人分别执行dfs. ...