秀杰实战教程系列《五》 实战课程之记账应用开发(续)

来源:未知 浏览 140次 时间 2021-06-09 23:09

缘起:昨天官方开发有了更新v0.10.101100Picker的mode属性已经支持date以及time(background-image的bug也修复)于是来更新此实例。

目标:实现集成日期组件

如图

官方文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

步骤网站死链查询于是来更新此实例。

目标:实现集成日期组件

如图

官方文档出处:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html

步骤在item.wxml文件中增加一个picker组件如下:

如图

从图中可以看出:

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

于是我们需要在item.js文件中声明一个data值date与wxml中的{{date}}绑定关联

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

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

如图

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

<picker mode="date" value="{{date}}" start="{{date}}" end="2017-09-01" bindchange="bindDateChange">

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

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

回到item.js文件

声明一个bindDateChange方法添加如下代码以写回data中的date值

至此已经实现集成日期picker组件。剩下的就是将它同之前的标题、类型、金额字段那样存在json再本地setStorage存储即可这里不作赘述

标签: 组件picker日期date