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

时间：2022-10-11 12:12:22

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

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

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

2、项目目录结构

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

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打造”美团&quot&semi;APP&quot&semi;我的”页面 --Hybrid App

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

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

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

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

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

  4. OnSen UI结合AngularJs打造”美团&quot&semi;APP首页 --Hybrid Ap

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

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

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

  6. 使用mui框架开发App&comma;当input获取焦点时，键盘弹出，底部导航栏上升。

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

  7. Android应用底部导航栏&lpar;选项卡&rpar;实例

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

  8. 二、Fragment&plus;RadioButton实现底部导航栏

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

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

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

随机推荐

  1. 字节的高低位知识，Ascii&comma;GB2312&comma;UNICODE等编码的关系与来历

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物.他们看到8个开关状态是好的,于是他们把这称为"字节". 再后来,他们又做了一些可以处理 ...

  2. 一&period;Linq to JSON是用来干什么的&quest;

    Linq to JSON是用来操作JSON对象的.可以用于快速查询,修改和创建JSON对象.当JSON对象内容比较复杂,而我们仅仅需要其中的一小部分数据时,可以考虑使用Linq to JSON来读取和 ...

  3. 【HTTP】http协议一些重要的知识点

    一. HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码.所有状态码的第一个数字代表了响应的五种状态之一.当用户试图通过HTTP或FTP协议访问一台运行主机上的内容时,Web服务器返回一 ...

  4. yarn-RM-check-by-curl

    #!bin/bash SELF_DIR="$( cd "$( dirname "$0" )" && pwd )" #grep ...

  5. autolayout后获取frame

    autolayout设置完layout立即用frame拿对应的值可能拿不准,因为autolayout设置完布局后布局引擎并不会马上去更改布局,而是将布局标记为待更新,此时可以用的方法有两种,一是延时0 ...

  6. python解释器配置和python常用快捷键

    1.准备工作 安装好Pycharm2017版本 电脑上安装好Python解释器 2.本地解释器配置 配置本地解释器的步骤相对简洁直观: (1)单击工具栏中的设置按钮. (2)在Settings/Pre ...

  7. text 文本。

    //支持转义符"\".   <text/> 组件内只支持 <text/> 嵌套. //除了文本节点以外的其他节点都无法长按选中. <view clas ...

  8. 出现 org&period;springframework&period;beans&period;factory&period;BeanCreationException 异常的原因及解决方法

    1 异常描述 在从 SVN 检出项目并配置完成后,启动 Tomcat 服务器,报出如下错误: 2 异常原因 通过观察上图中被标记出来的异常信息,咱们可以知道 org.springframework.b ...

  9. sp&lowbar;rename sqlserver 表 列 索引 类型重命名

    --[语法] sp_rename [ @objname = ] 'object_name' , [ @newname = ] 'new_name' [ , [ @objtype = ] 'object ...

  10. es6中的promise解读

    目录 什么是promise? promise的优点 回调地狱问题  Promise的三种状态 一个简单的promise promise中的then 利用promise解决回调地狱 promise的链式 ...

相关文章