首页的有下表有FloatAction操作工具按钮，在这里添加一个添加数据按钮，添加的事项的日期属于用户选中的日期，添加面板默认是隐藏起来的，当点击添加按钮，面板就会向上滑动出现，可以用animationAPI实现动画效果，其实本质也是CSS3动画。
<view animation="{{updatePanelAnimationData}}"> <input placeholder="请输入事项标题" value="{{todoInputValue}}" bindchange="todoInputChangeEvent" /> <textarea placeholder="请输入事项内容" value="{{todoTextAreaValue}}" bindblur="todoTextAreaChangeEvent"></textarea> <view> <block wx:for="{{levelSelectData}}" wx:key="*this"> <view bindtap="levelClickEvent" data-level="{{item}}"></view> </block> </view> <view> <view bindtap="closeUpdatePanelEvent">取消</view> <view bindtap="saveDataEvent">保存</view> </view> </view>
在我写到这个内容之前，官方还没有textarea组件，现在新增了，完美解决遗憾。
添加面板的动画控制：
/** * 显示事项数据添加更新面板 */ function showUpdatePanel() { let animation = wx.createAnimation({ duration: 600 }); animation.translateY('-100%').step(); this.setData({ updatePanelAnimationData: animation.export() }); } /** * 显示模态窗口 * @param {String} msg 显示消息 */ function showModal(msg) { this.setData({ isModalShow: true, isMaskShow: true, modalMsg: msg }); } /** * 关闭模态窗口 */ function closeModal() { this.setData({ isModalShow: false, isMaskShow: false, modalMsg: '' }); } /** * 关闭事项数据添加更新面板 */ function closeUpdatePanel() { let animation = wx.createAnimation({ duration: 600 }); animation.translateY('100%').step(); this.setData({ updatePanelAnimationData: animation.export() }); }
主要靠translateY来控制垂直方向的移动动画，刚进入页面的时候获取屏幕的高度，把面板的高度设置与屏幕高度一致，上滑的时候100%就刚好覆盖整个屏幕。
主要的添加事项逻辑：
// 保存事项数据 saveDataEvent() { const {todoInputValue, todoTextAreaValue, levelSelectedValue} = this.data; const {year, month, date} = this.data.data.selected; console.log(todoInputValue, todoTextAreaValue); if (todoInputValue !== '') { let promise = new DataService({ title: todoInputValue, content: todoTextAreaValue, level: levelSelectedValue, year: year, month: parseInt(month) - 1, date: date }).save(); promise && promise.then(() => { //清空表单 this.setData({ todoTextAreaValue: '', levelSelectedValue: '', todoInputValue: '' }); loadItemListData.call(this); }) closeUpdatePanel.call(this); } else { showModal.call(this, '请填写事项内容'); } }
获取添加面板上的数据和当前选择的日期直接用DataSerivce对象保存即可。
由于篇幅有限，剩下的数据删除和数据查看逻辑也比较简单，不再细说，本文主要是介绍小程序的ES6开发。
写完这篇文章的时候，小程序已经公测了好久。本人是个人用户，没有资格参与公测，热情也减半了不少，接触小程序也有一个多月了，写了三个例子，感觉还好，至少能够写出点东西来，不枉这番努力。
效果图
源代码：demo地址