1、页面效果图：(点击底部导航按钮，可切换到不同的页面)

演示地址：http://www.nxl123.cn/bokeyuan/2018080301/meiTuanDemo/

2、项目目录结构

3、核心代码

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy"
          content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport"
          content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!--引入框架中的css-->
    <link rel="stylesheet" href="lib/onsen/css/onsenui.css">
    <link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css">
    <!--引入自定义的css-->
    <!--引入框架中的js-->
    <script src="lib/angular/js/angular.min.js"></script>
    <script src="lib/onsen/js/onsenui.min.js"></script>
    <!--引入自定义的js-->
    <script src="js/app_module.js"></script>
    <script src="js/indexController.js"></script>
    <title>美团首页</title>
</head>
<body ng-app="indexApp" ng-controller="IndexController">
<ons-navigator>
    <ons-page>
        <ons-tabbar>
            <ons-tab ng-repeat="tab in tabs" page="{{tab.page}}" label="{{tab.label}}"
                     icon="{{tab.icon}}" active="{{tab.active}}"></ons-tab>
        </ons-tabbar>
    </ons-page>
</ons-navigator>
</body>
</html>

app_module.js：

var app = angular.module('indexApp',['onsen']);

indexController.js：

app.controller('IndexController', function ($scope) {
    $scope.tabs = [
        {
            page:"pages/home.html",
            label:"首页",
            icon:"ion-home",
            active:true
        },
        {
            page:"pages/near.html",
            label:"附近",
            icon:"ion-android-pin"
        },
        {
            page:"pages/walk.html",
            label:"逛一逛",
            icon:"ion-ios-basketball-outline"
        },
        {
            page:"pages/order.html",
            label:"订单",
            icon:"ion-android-clipboard"
        },
        {
            page:"pages/mine.html",
            label:"我的",
            icon:"ion-ios-person-outline"
        }
    ]
});

4、项目相关的文件下载

http://www.nxl123.cn/files/meiTuanDemo01.zip

OnSen UI结合AngularJs打造”美团"APP底部导航栏 --Hybrid App的更多相关文章

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

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

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

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

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

    1.页面效果图: 演示链接地址:http://www.nxl123.cn/bokeyuan/meiTuanDemo_near/ 2.核心代码 near.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. 使用mui框架开发App,当input获取焦点时，键盘弹出，底部导航栏上升。

    转自 https://blog.csdn.net/elementFei/article/details/72917393 感谢 问题: 使用mui框架开发App,当input获取焦点时,键盘弹出,底部 ...

  7. Android应用底部导航栏(选项卡)实例

    现在很多android的应用都采用底部导航栏的功能,这样可以使得用户在使用过程中随意切换不同的页面,现在我采用TabHost组件来自定义一个底部的导航栏的功能. 我们先看下该demo实例的框架图: 其 ...

  8. 二、Fragment+RadioButton实现底部导航栏

    在App中经常看到这样的tab底部导航栏   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使用Fragment+RadioButton去实现.下面我们来写一个例子 首先我们先在activi ...

  9. Android商城开发系列（三）——使用Fragment+RadioButton实现商城底部导航栏

    在商城第一篇的开篇当中,我们看到商城的效果图里面有一个底部导航栏效果,如下图所示: 今天我们就来实现商城底部导航栏,最终效果图如下所示:   那么这种效果是如何实现,实现的方式有很多种,最常见的就是使 ...

随机推荐

  1. Oracle常用函数——TO_DATE

    TO_DATE 含义:将具有固定格式的字符串类型的数据转化为相对应的Date类型数据,官网解释如下图   使用方法 TO_DATE("需要转换的字符串","日期格式&qu ...

  2. Linux使用——Linux命令——Linux 系统基本命令使用记录

    查看系统版本信息 查看系统版本:cat /proc/version 查看cpu相关信息,包括型号.主频.内核信息:cat /proc/cpuinfo 快速了解CPU使用情况:free -h 解压文件 ...

  3. ODAC（V9.5.15) 学习笔记（四）TMemDataSet （1）

    所有的数据集类组件都是从TMemDataSet继承下来的,该组件实现了内存中对数据的管理,其主要的属性.方法和事件如下. 1.数据更新 名称 类型 说明 CachedUpdates Boolean 数 ...

  4. ODAC（V9.5.15) 学习笔记（二）控件列表

    ODAC的控件有26个,简单介绍如下: TOraSession  管理Oracle的连接  TOraQuery  使用SQL进行数据获取,自动将更新提交数据库  TSmartQuery    在处理字 ...

  5. 枚举+排序|神奇算式|2014年蓝桥杯A组题解析第三题-fishers

    标题:神奇算式 由4个不同的数字,组成的一个乘法算式,它们的乘积仍然由这4个数字组成. 比如: 210 x 6 = 1260 8 x 473 = 3784 27 x 81 = 2187 都符合要求. ...

  6. c# 之partial（分部代码和分部类）

    using System; namespace Partial { class Program { static void Main(string[] args) { A a = new A(); } ...

  7. P2120 [ZJOI2007]仓库建设（dp+斜率优化）

    思路 首先暴力DP显然,可以得20分 加上一个前缀和优化,可以得到40分 然后上斜率优化 设\(sum_i\)为\(\sum_{1}^iP_i\),\(sump_i\)为\(\sum_{1}^{i}P ...

  8. Docker 开发概述

    This page lists resources for application developers using Docker. Develop new apps on Docker If you ...

  9. js中获取当前浏览器类型

    本文为博主原创,转载请注明出处: 在应用POI进行导出时,先应用POI进行数据封装,将数据封装到Excel中,然后在进行download下载操作,从而完成 POI导出操作.由于在download操作时 ...

  10. Mysql视图、触发器、事务、储存过程、函数

    一.视图 什么是视图 视图是有一张表或多张表的查询结果构成的一张虚拟表 为什么使用视图 当我们在使用多表查询时 我们的sql语句可能会非常的复杂,如果每次都编写一遍sql'的话无疑是一件麻烦的事情,这 ...