移动端主页面框架

模块项目：https://pan.baidu.com/s/182iGu1S8-7b3j4wj-kTblA
移动端主页面框架主要是默认标题修改、添加多个主页面底部导航栏图标、添加导航栏样式类，用图标改变激活页显示样式、主体内容中九宫格的设计这几部分内容

主页面设计

添加主页面

我们新建项目时，使用“New Mobile Template新移动应用”模板，模板中有“<Mobile View>”固定名称的移动端显示块，默认就是移动端的模板
在“<Mobile View>”固定名称的移动端显示块中，已添加了一个主页面，如果需要添加更多页面，则右键单击“<Mobile View>”显示块任意位置，在弹出的菜单中选Add Element—Page来添加主页面，主页面必须用此方式添加，不能使用元件选项板中页面元件，因为主页面与导航栏等有逻辑关系，添加子元件文件添加的主页面默认带有导航中要求的内容（同样要求的还有电脑端的分页元件各分页面添加方式）
可以为添加的主页面重命名，名称将会自动显示为页面的标题（这是标题中一个默认设计好的预处理逻辑定义的）

为主页面添加导航图标

首先我们将想要显示的导航页面图标文件放于项目的WEB文件夹中，我们模块项目中，是在WEB下image文件夹中新建了icon文件夹，放入了三个绿色图标
进入各个页面中，添加一个字符常量，将图标地址如“images/icon/Home.png”输入常量值中（常量名称可以随意定义，因为地址带有斜线所以无法作为名称）、传入页面图标变量中

主页面九宫格内容显示设计

九宫格内容显示设计在移动端页面设计中很常见，与下面所说的列表一起，都是最常用的页面内容布局显示方式
开发过程为
- 页面（模块项目中是首页）内容区中放入三个行元件
- 每个行元件中放入三个显示块元件（实际开发每个块元件或按钮元件应是独立元件，因为基中要放置点击事件行为元件，各事件处理内容全部不一样）
- 为第一行和第三行的第一、三个显示块、第二行的第二个显示块设定“html.style”样式属性，定义属性值为“width:33.33%;height:120px;background-color:#FEF9EC;float:left;”，其他显示块定义属性值为“width:33.33%;height:120px;background-color:#F2FCFE;float:left;”

主页面列表式内容显示设计

列表是移动端页面最为常用的内容显示方式，一组组的信息，比如菜单、产品信息、商品信息、购买记录都是用列表来显示的，所以我们为移动端页面预开发了一个由名显示元件组成的列表显示元件
直接从开发区右侧元件选项板中显示类元件中点选列表元件，点击开发区页面中间，就可放入列表元件，列表元件中已有图标、标题、说明字符显示元件，需要时可添加、删除各类元件设计自己需要的显示内容，列表中也有点击事件，点击行为中可以放一个页面元件，用户点击后可以查看详细内容
可以参考“可视化元件手册”的“显示元件”中“List列表”一节内容了解列表用法

移动端主页面样式设计

样式设计除了部分只用一次的如九宫格样式外，其他我们是设计在less样式框架的文件中的，移动端显示主页机的样式在项目的“web\styles”文件夹下的“mobile-view.less”文件中设定的

我们修改了默认的定义，修改内容如下：

.page下，padding:0;—这个是页面内容边距，我们改为0边距
.header下，padding:0px 0px; 同时去掉了margin:-@page-padding -@page-padding @page-padding -@page-padding;
.btn下，top:3px; 按钮距上的边距改为3px
.footer下的img对象中，将之前最大宽和高44px改为20px和16px，且添加了一行定义让其居中独立一行显示，并添加了未激活时加100%灰色滤镜处理的效果将图片和字符全显示为灰色

  img
 {
   max-width:20px;
   max-height:16px;
   margin:-2px auto;
       -webkit-filter: grayscale(100%);
       -moz-filter: grayscale(1);
       -ms-filter: grayscale(100%);
       -o-filter: grayscale(100%);
       filter: grayscale(100%);
       filter: gray;
   }

而在激活下，对导航字符颜色定义为与我们图标一样的颜色，同时不加滤镜处理图片

	&.active a, &.active a:hover, &.active a:focus, &.active .link
 {
     color:#A0DDDE;
 /*color: @navbarLinkColorActive;*/
 text-decoration: none;
 /*background-color: @navbarLinkBackgroundActive;*/
 /*.box-shadow(inset 0 3px 8px rgba(0,0,0,.125));*/
 img
    {
   	max-width:20px;
   	max-height:16px;
 	margin:-2px auto;
 	-webkit-filter: grayscale(0%);
             -moz-filter: grayscale(0);
             -ms-filter: grayscale(0%);
             -o-filter: grayscale(0%);
             filter: grayscale(0%);
             filter: gray;
    }
 }

复用指导

使用主页面设计时，显示部分的设计较为简单，所以可以在新项目中直接开发完成，而样式可直接用下载的本模块项目中的“web\styles”文件夹下的“mobile-view.less”文件进行替换使用

开发框架模块手册

移动端主页面框架

主页面设计

添加主页面

为主页面添加导航图标

主页面九宫格内容显示设计

主页面列表式内容显示设计

移动端主页面样式设计

复用指导