【Agile框架（一）】首页布局

布局思路：

1、采用底部的nav进行布局

 1 <nav class="bar bar-tab">
 2             <a class="tab-item active" href="#home_article" data-target="article">
 3                 <span class="icon icon-home"></span>
 4                 <span class="tab-label">首页</span>
 5             </a>
 6             <a class="tab-item" href="#householdAcceptance_article" data-target="article">
 7                 <span class="icon icon-list"></span>
 8                 <span class="tab-label">分户验收</span>
 9             </a>
10             <a class="tab-item" href="#officialDeliver_article" data-target="article">
11                 <span class="icon icon-stop"></span>
12                 <span class="tab-label">正式交付</span>
13             </a>
14             <a class="tab-item" href="#dailyReception_article" data-target="article">
15                 <span class="icon icon-pages"></span>
16                 <span class="tab-label">日常接待</span>
17             </a>
18             <a class="tab-item" href="#statisticsAnalysis_article" data-target="article">
19                 <span class="icon icon-pages"></span>
20                 <span class="tab-label">统计与分析</span>
21             </a>
22         </nav>

底部导航

2、内容的切换（即data-target）采用对象是article（见上一步中的data-target属性的值）

　　需要注意的是：article是没有返回（back）的方法的，section才有。研究了下appStore等的布局，首页的切换都采取的是底部nav切换，并没有顶部的回退，因为也没有这个必要了嘛。

3、上一步中首页内容article的切换：是在程序启用时调用A.launch()方法实现的---因为把article的文件放在了html\目录中。

 1 $(function () {
 2     A.launch({
 3         basePagePath: 'html/',
 4         showPageLoading: false,
 5         isAutoRender : true
 6     });
 7
 8     //首页加载首页内容
 9     A.Router.showArticle("html/home_article.html");
10 });

应用程序启动

大致就这3步，需要注意的几点：

1、来自官方的API说明：“为了有效的管理所有的Section，Agile设定了一个id为#section_container的容器，所有Section位于此容器之下。”

否则就可能出现在访问首页时，url后加“#undefined”的问题。

查了下agile的源码，可以解释上面的说明：

在A.Router对象中的_initIndex方法：

转载于:https://www.cnblogs.com/JimmyFu/p/4481119.html

【Agile框架（一）】首页布局相关推荐

微信小程序（看文档写实例三）微信小程序课堂宝APP实现整体界面框架及首页布局
一.首页布局简单思路回顾上一篇博文,首页的内容主要有轮播图,横向滑动菜单以及菜单对应的view,横向滑动菜单有签到.课堂测试.模拟测试.课堂提问.答问记录五个选项,当点击选项时更新显示view.由于 ...
网站首页布局设计的注意事项
我们在建设网站的时候,首页是至关重要的,因为一般客户在进入网站浏览时,首先看到的就是网站的首页,如果网站的首页能够吸引到客户,那么会给网站带来很多的浏览量.相反的是,如果首页设计的不好,那么用户在看完 ...
SharePoint Online 创建门户网站系列之首页布局
前言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Onlin ...
小程序高级电商前端第1周走进Web全栈工程师一----小程序注册、开发工具推荐、《风袖》首页布局详尽分析、Webstorm开发小程序必配配置、mock数据...
接下来开启一门全新的课程的学习,其实这是去年6月份所记录的,只是木有公开,然后到目前为止已经间隔了快1年没管了,基本上是已经快放弃的节奏,但是呢它又是我一直特别想学习的,所以决定公开,鞭策自己得继续前 ...
Web前端之仿携程首页布局
Web前端之仿携程首页布局 1.前言出于之前早就学习过Web的相关技术,后面很少写仿网页或者做后端等案例了,导致一些基础知识点有所遗忘,而这部分知识又是Java学习中的重中之重,因此借目前学校课程正 ...
VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局一.页面布局二.创建Home组件三.路由index.js 文件配置主页路径四.添加welcome组件一.页面布局 <el-container& ...
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由
若依前后端分离框架去掉首页登录后跳转至动态路由的第一个路由若依框架VUE前端界面,登录后默认跳转至动态路由第一路由(第一个子菜单) 一.登录后跳转第一路由界面二.设置路由的首页路径,方便后续的获 ...
html怎么做qq空间主页,QQ空间首页布局
html> QQ空间首页布局 body,ul,li{ margin: 0; padding: 0; } body{ margin: 0px; padding: 0px; background-c ...
鸿蒙版瑞幸咖啡开发日记（一）首页布局设计
鸿蒙版瑞幸咖啡开发日记之首页布局设计 1.整体布局设计思路 2.三大模块开发 2.1 头部信息栏的开发 2.2 中间菜单栏的开发 2.2.1 一级分类菜单 2.2.2 二级分类菜单思路整理 2.2.3 ...
Web前端第二季(CSS):十:第5章:案例开发:505-SiKi学院首页布局分析+506-开发右侧学习中心链接样式+507-切分SiKi学院的布局+508-开发SiKi学院的导航按钮
目录一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 1.SIKI学院:我参考此视频实操 1.w3school ...

【Agile框架（一）】首页布局

【Agile框架（一）】首页布局相关推荐

最新文章

热门文章