侧边栏目布局范例

  • 1、界面设计
  • 2、代码分析侧边栏布局是一种比较常见的布局方案，它在空位紧缺的界面内可以提供更多快捷的入口供用户操作，简化了操作层级。

例如如下效果

侧边栏目布局范例 - 图1侧边栏目布局范例 - 图2侧边栏目布局范例 - 图3

那么如何实现这种效果呢，我们通过UI设计器来构造一个范例。

1、界面设计

1.1、创建一个页面，并命名为multi

侧边栏目布局范例 - 图4

1.2、添加一个header和两个page页面

侧边栏目布局范例 - 图5

注意上述控件插入时与我们平常排布的方式不太相同，Header要直接放到Body中而不是插入到Page中。

1.3、分别设定他们的属性

侧边栏目布局范例 - 图6

为标题左右按钮设定图标

侧边栏目布局范例 - 图7

添加的第一个Page作为侧边栏容器页，设定其定位方式为fixed，同时设定其宽度为100%。

侧边栏目布局范例 - 图8

设定第二个Page的x为0，用来初始化窗口位移动画时的起始位置。

得到的布局效果如下

侧边栏目布局范例 - 图9

1.4、保存并导出全部
1.5、编辑js代码，加入滑动效果

打开js目录下生成的代码multi.js。可以看到生成的代码如下

侧边栏目布局范例 - 图10

为标题左右按钮加入处理代码

侧边栏目布局范例 - 图11

2、代码分析

打开multi.html，可以看到生成的HTML中，包含我们添加的header和两个Page。

侧边栏目布局范例 - 图12

第一个Page我们使用了ufix使其成为一个相对于物理屏幕位置的定位的容器，我们可以用它来承载侧边栏。第二个Page我们用来作为内容的主界面来使用。由于添加顺序Page_1会盖在Page_0之上。而Header由于其z-index属性值较高会显示在最上层。

打开js目录下的multi.js文件，可以看到我们刚才修改的代码

侧边栏目布局范例 - 图13左右两个按钮代码很相似。首先是使用css函数对Page_1加入了一个阴影，使其和Page_0产生错位效果。然后调用animate函数使Page_1进行位移动画，通过status控制位移的方向。在Page_1位移的同时，我们同时对Header进行了相同位置的移动。通过模拟器分别点击标题按钮，可以看到如下效果

侧边栏目布局范例 - 图14

上述代码中，我们把Header放到了Page之外，同时在动画移动时，Page和Header分别进行位移，这是因为当Header位于Page之内时，由于Header的position属性为fixed，这时如果对Page使用transform进行动画变换，会造成Header的fixed属性失效，引起header定位问题。