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. 51Nod 1667 概率好题 - 容斥原理

    题目传送门 无障碍通道 有障碍通道 题目大意 若$L_{i}\leqslant x_{i} \leqslant R_{i}$,求$\sum x_{i} = 0$以及$\sum x_{i} < 0 ...

  2. Eclipse自动生成方法注释 快捷键

    自动生成方法的注释格式,例如 /*** @param str* @return* @throws ParseException*/ 快捷键是 ALT + SHIFT + J,将光标放在方法名上,按快捷 ...

  3. [error] 2230#2230: *84 client intended to send too large body: 1711341 bytes

    centos7 lnmp部署知乎上传主体报错 2019/01/17 18:55:27 [error] 2230#2230: *89 open() "/code/wordpress/favic ...

  4. （转）Multi-Object-Tracking-Paper-List

    Multi-Object-Tracking-Paper-List 2018-08-07 22:18:05 This blog is copied from: https://github.com/Sp ...

  5. LightOJ 1268 Unlucky Strings（KMP+矩阵乘法+基础DP）

    题意 给出字符串的长度 \(n\) ,以及该字符串是由哪些小写字母组成,现给出一个坏串 \(S\) ,求存在多少种不同的字符串,使得其子串不含坏串. \(1 \leq n \leq 10^9\) \( ...

  6. RabbitMQ学习之延时队列

    原帖参考:http://www.cnblogs.com/telwanggs/p/7124687.html?utm_source=itdadao&utm_medium=referral http ...

  7. web开发测试注意点

    1.用户操作多页面情况 如果用session来获取当前页面情况时要特别注意,操作时出现另一个页面的情况,会出现传参数混乱 解决:后台可以获取并比对判断当前页面某些参数值

  8. C# 防止窗体闪烁

    protected override CreateParams CreateParams { get { CreateParams cp = base.CreateParams; cp.ExStyle ...

  9. Java处理微信公众号文章图片不显示微信

    http://blog.csdn.net/just4you/article/details/52933620

  10. 使用git上传项目到github的最基础命令

    一.前言 把github作为自己项目托管的地方,实在是一个明智的选择.就算你不为自己项目考虑,你也要为你团队项目开发而学呀!可能有些初学者(比如我)会觉得git命令好多啊,又是各种术语,觉得好难上手. ...