俗话说,学以致用,这是根据前面学习的目录结构,核心语法,数据绑定,事件绑定等内容进行的第一次简单的实践,我们可以将输入框的内容添加到下面的列表项,也可以将下面的列表项删除,是to-do-list清单的雏形

一.前言

效果图.png

这一篇文章会做一个小小的to-do-list清单项目,也就是添加内容到清单列表项,首先会先搭建好网页结构,然后进行业务逻辑代码的编写,这里网页结构主要由输入向,提交项,清单列表项,删除项组成,业务逻辑主要由监听输入框数据变化的双向数据绑定,添加按钮的add方法,删除列表项的remove方法组成.

二.搭建网页结构

1.首先新建一个新项目,将项目中log页面删除,并且删除app.json文件中的pages中的log页面路径,删除index.wxml,index.wxss,index.json{}中的内容删除;保留app.json,app.wxss,app.js中的内容,前两个是为了保留顶部导航栏的样式,后者是为了程序正常编译运行
2.按照如下代码搭建网络结构,一般将网页分为几部分,然后再单独在每一部分填充具体内容,这里用的布局样式主要是伸缩布局和align-items

输入提交项结构.png

输入提交项样式.png

列表删除项结构.png

列表删除项样式.png

三.业务逻辑

1.双向数据绑定
通过bindinput事件监听页面数据的变化,通过this.detail.value在后天拿到input中内容,通过this.currentTarget.dataset.xxx拿到data-xxx标签属性传递过来的值,通过this.setData改变数据项

双向数据绑定.png

数据项.png

2.添加数据项
通过按钮点击事件触发输入框内数据的添加

添加.png

删除.png