zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    Fiddler抓包9-保存会话(save)
    Selenium2+python自动化61-Chrome您使用的是不受支持的命令行标记:--ignore-certificate-errors
    Fiddler抓包8-打断点(bpu)
    Fiddler抓包7-post请求(json)
    Java图片验证码
    servlet过滤器
    servlet监听器实现在线人数统计
    基于MVC模式的数据库综合练习
    JSTL详解
    初识EL表达式
  • 原文地址:https://www.cnblogs.com/qikeyishu/p/9270345.html
Copyright © 2011-2022 走看看