小程序实现在线选座实战（上）

假设下图就是我们要实现的功能页面，我们先对这个功能页面进行组件划分，header、main、footer三个组件来分别实现：

这里我们定义了 header、main、footer 容器，分别来装载三个组件，所有的样式都放在styles.css中，reset.css是来重置样式，结合header里的那段脚本实现rem不同屏幕自适应。

这里没有互动，是很简单的展示组件

到这一步我们可以看到基本的架子了

这个组件我们就创建一个footer.js实现

以上我们用闭包创建了一个Footer组件，通过Footer.init实现组件初始化，对外留着一个setData方法，用来设置约定格式的数据然后进行视图渲染。还有一个resetStatus方法，来重置状态和视图。

然后我们在index.js对组件进行初始化

创建了Footer组件后，我们完成的界面如下:

接下去，我们将在《小程序实现在线选座实战（中）》实现选座组件，在《小程序实现在线选座实战（下）》中实现数据交互。

在<footer>块之外再包裹一层div，然后再增加一个与<footer>同级的<div>块，当<div>块的高度和<footer>一样的时候，主页面就会有一个和<footer>一样大小的pad，问题就解决了

先看效果

如需要看下一篇文章-- 微信小程序 自定义底部导航闪烁解决 正在加急完成预计明天

⚠️ "tabBar"重点，自定义tabbar也需要写，但是在app.js中隐藏默认的tabbar

⚠️ this.getSystemInfo() === 获取设备信息，因为iosX系统适配

tabbar.wxml

tabbar.wxss

c.js

tabbar.json

自定义导航基本可以，下面在页面中引入并使用

footer.wxml, header.wxml, my.wxml

footer.json, header.json, my.json

footer.js, header.js, my.js

---