如何在input输入框中加一个搜索的小图片_微信小程序（9）个人任务清单（1）...

有没有被每天的各种任务折磨的神魂颠倒？有没有发现自己经常忘记要做的事情？有没有......

看起来像不像卖药的小广告 只可惜我不卖药只写代码~

言归正传，咱们先一起分析一下要做的任务清单都需要什么(按从易到难的步骤来分析)：

1、有一个输入框，能将要做的任务输入进去。

2、有一个显示区域，显示要做的任务列表。

3、能将不需要做的任务进行彻底删除、将做完的任务从任务清单中删除。

4、能将做完的任务按照完成时间进行有序排布。

5、任务执行可有倒计时选项，倒计时完成有响铃提示。

开始动手！

1、要个输入框，这简直不能再简单了，只需要一个input标签即可，在之前的课程中，咱们需要在input标签外面加个form标签，再利用个提交按钮将输入提交到 js 代码部分。可是这样的界面在这里真的不美观，那怎么办呢？

首先先把input标签放进去：

这样，便有了一个可以输入任务的区域，但是界面太丑，要对其进行一番小美化：

class=  <view class='header'>    <input class='new_item' placeholder='接下来您要做点什么？'>input>  view></view>

.container{
      padding: 20rpx;}.header{
      border: 1px solid #e0e0e0;  border-radius: 10rpx;  box-shadow: 0 0 5rpx #e0e0e0;  padding: 20rpx;}.new_item{
      flex: 1;  font-size: 32rpx;}

界面长这样：

我感觉各位同学此时此刻的心情都是这样的：你是在逗我么？这哪里是一步一步来的，明显是上来就飞跃大峡谷嘛，哈哈哈，别怕，听我细细道来：

首先是用view标签进行包括，这是一个良好的书写习惯，用来控制页面布局：

类为container的view是用来对整体布局做限制的，在本例中用来让内容距离手机边框有一些距离，看起来更舒服