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. grep 正则匹配

    \{0,n\}:至多n次 \{\ 匹配/etc/passwd文件中数字出现只是数字1次到3次 匹配/etc/grub2.cfg文件以一个空格开头匹配一个字符的文件的所有行 显示以LISTEN结尾的行 ...

  2. 使用Http协议Post上传文件

    转载:http://www.cnblogs.com/softidea/p/5745369.html 转载:https://blog.csdn.net/huanongying131/article/de ...

  3. if语句学习

    #print("您好,我叫周星驰") ''' x=1+2+3 print(x*4) print(x**x) a=input("请输入相应的数字a") a=int ...

  4. vue学习【第七篇】：Vue之导入Bootstrap

    Vue引入bootstrap主要有两种方法 方法一:在main.js中引入 此方法导入的bootstrap中对于html,body的一些预设置的css样式可能无效 引入jQuery 在当前项目的目录下 ...

  5. java 之 dom4j解析xml

    *dom4j,是一个组织,针对xml解析,提供解析器dom4j *dom4j不是javase的一部分,想要使用需要导入dom4j提供的jar包 *第一步:创建lib文件夹,将压缩文件放到此处 *第二步 ...

  6. 题解——P1108低价购买（DP）

    第一问是最长下降子序列,n很小,n^2可过,注意最长下降子序列的枚举顺序即可 ;i<=n;i++)//不要写错 ;j<i;j++)//不要打成<= ) b[i]=b[j]+; 第二问 ...

  7. Windows Service application 初步探索

    今天写了一个windows service程序, 本身这个程序是一个console application, 但是不能够通过F5直接运行, 会出现下面图片所示的错误: 提示说需要安装一个Instalu ...

  8. Docker Engine SDKs and API 的开发1

    Develop with Docker Engine SDKs and API Docker provides an API for interacting with the Docker daemo ...

  9. EF Core In-Memory Database Provider

    原文链接 This can be useful for testing, although the SQLite provider in in-memory mode may be a more ap ...

  10. Cas单点登录配置数据查询用户

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...