微信小程序快速入门个人学习心得（四）

微信小程序快速入门个人学习心得（三）

TODOS案例

这个案例是要做一个任务清单。

首先 思考一共分为几块内容：
1、输入框
2、任务列表
3、工具栏
因此一共三块，在对应wxml文件中，父容器中添加三个子容器。

<view class="container">
<view class="searchHandle"></view>
<view class="worksHandle"></view>
<view class="utilsHandle"></view>
</view>

对于输入框，又分为左边的添加和后面的输入。
对于任务列表，我们先固定写三个任务去调节样式。
对于工具栏则是三个文本。
在对应wxml中：

<!--index.wxml-->
<view class="container">
  <view class="searchHandle">
    <view class="addHandle">
      <image src="../../images/plus.png"></image>
    </view>
    <view class="inputHandle">
      <input type="text" placeholder="Anything here..."/>
    </view>
  </view>

  <view class="worksHandle">
    <view class="item">
      <icon type="success"></icon>
      <text>学习HTML</text>
      <icon type="clear" size="16"></icon>
    </view>
    <view class="item">
      <icon type="success"></icon>
      <text>学习CSS</text>
      <icon type="clear" size="16"></icon>
    </view>
    <view class="item">
      <icon type="success"></icon>
      <text>学习JS</text>
      <icon type="clear" size="16"></icon>
    </view>
  </view>
  <view class="utilsHandle">
    <text>全选</text>
    <text>还剩2个任务</text>