##目标：实现集成日期组件

步骤茬item.wxml文件中增加一个picker组件，如下：

1.日期后面是空白的应该默认显示今天日期； 2.点击确定也没有显示到组件上，需要实现bindDateChange方法

然后在onLoad中初始化字符串格式的日期值，详细说明见注释：

经过如上处理，日期组件已经显示为当前日期

处理到此我们还需要修複一个逻辑错误，即组件的结束日期应该不超过当日做法也很简单，只需要在wxml文件中对picker的日期属性end由改为{{date}}即可

吐槽一下官方的picker的还是囿bug的，完全不听start与end使唤仍可以选任意日期，暂时不去理会代码就这么写着，什么时候开发工具修复了自然可以了毕竟是现在还只是內测，就将就用着

接下来处理日期组件点击确认事件bindDateChange

// 点击日期组件确定事件

至此，已经实现集成日期picker组件剩下的就是将它同之前的标題、类型、金额字段那样存在json再本地setStorage存储即可，这里不作赘述具体可以参考本人公众号之前发的文章《微信小程序（应用号）实战课程の记账应用开发》。

源码下载：关注下方的公众号->回复数字1002

 
 

 可以发现上面2个值的效果是正好相反的。
 
 

有一点需要注意wxml中总共4个view，它们的宽的和为1000rpx而屏幕宽度最大为750rpx，而view没有自动换行说明一定是压缩了，这正是flex属性值的好处自动调整各个子组件的宽度，与手机开发中的weight有异曲同工之处

 

 如果不想被压缩，怎么办也简单，我们来插个队说一下另一个属性flex-wrap，它有3个属性值：
 
 

• nowrap（不换行默认值）

 

 分别来看一下3种属性值的效果图
 
 

 

 nowrap类型，从下图可以看到与没有设置该属性时完全一样，因为它是默认值

 

 

 wrap，从下图可以看出由于加上第4个黑色框，整个宽度为1000rpx超过了屏幕极限，所以换行了

 

 

 再次运行程序，效果图如下：

 

1只有在display：flex时对齐方式才起作用，如果是display：block则不起作用
2，主轴与侧轴的區别请看下面的附录。

• align-items子组件在侧轴（竖直）方向上的对齐方式

  • center，侧轴居中（在父组件宽度/高度上的居中并不是屏幕宽度/高度居中）

• justify-content，子组件在主轴（水平）方向上的对齐方式

  • center主轴方向居中（在父组件高度/宽度上的居中，并不是屏幕高度/看宽度居中）
• space-between两端对齐，除了两端的子元素分别靠向两端的容器外其余子元素之间的间隔都相等。
• space-around子元素之间的距离相等，两端子元素距离容器的距离和其它孓元素之间的距离相同

---

 

 其实只是将height改为了1000rpx，以前是100%这样父组件的大小等于子组件的大小，就不会看到明显居中效果所以改成了1000rpx。运荇效果如下

 

---

---

下面还有空白只是我没有截出来而已。

---

---

 

 居中测试完成下面展示一下align-items的其它属性
 
 

---

下面之所以还有空白，是因为父组件的宽度設置的为1000rpx并不是屏幕高度。

 

 为红色块设置这个属性值如下：
 
 

 

 设置display:none前和设置后的的效果图如下：
运行效果如下：

 

 可见，整个view组件不见了还有一个属性visibility的hidden值，也能让控件消失但却会占位置，如下：
 
 

---

 

 可选值中排在第一位的为默认值。
 
 

---

主轴与flex-direction属性密切相关更详细的资料可看。

• row :从左到右的水平方向为主轴
• row-reverse：从右到左的水平方向为主轴
• column:从上到下的垂直方向为主轴