一般我们在学习编程的时候，经常需要练习的一个功能是待办功能。有一个文本框可以输入待办事项，点击添加按钮可以将输入的待办事项加入到数组中。

列表循环展示待办事项，点击×的图标可以删掉当前待办事项。那如果使用低码开发如何实现这个功能呢？

定义变量

我们需要定义一个数组变量，用来存放我们的待办事项

还需要定义一个变量，用来存放输入的值

再定义一个变量来记录当前待办事项是第几项

组件搭建

首先往页面添加一个普通容器，里边放单行输入组件和按钮组件

为了让组件一行显示，我们需要给普通容器设置样式

self {display: flex;padding-left: 15px
}

默认单行输入组件有标题，我们可以把标题的内容清掉

按钮的话可以设置宽和高，为了让按钮的文字内容居中显示也需要设置一下样式

self {width: 200px;height: 100px;display: flex;justify-content: center;align-items: center;flex-direction: row
}

接着我们构造一下循环的待办事项，组件的话添加普通容器，里边分别添加普通容器、文本、图标三个组件

给外层的普通容器设置样式，让内容一行显示

self {display: flex;align-items: center;padding-top: 15px;padding-left: 15px;flex-direction: row;padding-bottom: 15px;justify-content: flex-start
}

我们第一个普通容器，设置样式用来显示列表项的小黑点

self {width: 10px;height: 10px;background: rgb(0, 0, 0);margin-right: 15px;border-radius: 90px
}

图标组件的话我们选择close图标

数据绑定

先选中单行输入组件，输入值绑定为我们的inputTodo变量

列表项的话，我们选择外层的普通容器绑定循环展示

文本组件的文本内容用表达式绑定，绑定为待办事项的内容

事件绑定

数据绑定之后就需要绑定事件，首先是单行输入绑定onChange事件

这个绑定起的作用是当输入值改变的时候将改变的值赋值给变量

接着给添加按钮定义点击事件，创建一个自定义方法

export default function({event, data}) {console.log($page.dataset.state.inputTodo)$page.dataset.state.todos.push({id:$page.dataset.state.id++,text:$page.dataset.state.inputTodo})$page.dataset.state.inputTodo = ""
}

代码的意思是拿到当前输入的值，把它放到数组里

然后就是给删除图标定义事件，删除当前待办事项

export default function({event, data}) {console.log(data)$page.dataset.state.todos = $page.dataset.state.todos.filter((item)=>item!=data.target)
}

代码的意思是，对比当前传入的对象和数组中的对象，如果不相等就保留，相等就去除。

为了拿到当前的循环对象，在调用自定义方法时候要传入参数，使用表达式进行传入

总结

本篇我们用低码工具实现了一个待办的功能，可以进行添加，也可以删除。当然目前是存在数组中的，也可以结合数据源的方法做一个持久化的案例，我们输入的时候存入数据库，删除的时候从数据库中删除。结合官方的API可以自行改造成持久化的版本。

小程序中实现待办功能相关推荐

在微信小程序中实现Wi-Fi功能
在微信小程序中实现Wi-Fi连接功能 #1.首先通过后端提供的接口获取到ssid和password const { data: wifi } = useQuery(["wifi"] ...
如何在微信小程序中实现具有@功能的输入框
你可以直接从npm中下载组件使用: npm - yun-ui-micro 中的 atinput 组件.也可通过本文代码二次修改. 展示背景像微信群聊.微博的输入框中输入"@"符 ...
小程序中使用表格功能
小程序中使用表格效果展示: 1.wxml代码 <view class="table"><view class="tr bg-w">&l ...
小程序中实现付款功能
目录 1 支付场景 2 创建数据源 2.1 商品数据源 2.2 订单数据源 3 创建连接器 4 创建应用 5 功能开发 5.1 首页 5.2 商品详情页 5.3 订单页总结日常小程序里很多是需要付 ...
php微信小程序如何无限点赞,小程序中点赞和收藏功能的实现代码
小程序中的点赞功能和收藏功能是必不可少的,那么该如何实现点赞和收藏两个功能呢?本篇文章将给大家分享小程序中的点赞功能和收藏功能的代码实现. 收藏功能:focusFavoriteTab: functio ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
微信小程序中使用nfc
在小程序中调用nfc功能,实现小程序刷卡直接上代码: 先在小程序的根目录或是pages目录下创建一个nfc文件夹在nfc文件中创建一个nfc.js的文件代码: // 获取nfc实例 functi ...
微信小程序中百分百实现聊天界面
众所周知,全网来看,微信的聊天界面看着就是舒服,那能否在微信小程序中实现该功能,同时可以实现输入文本和语音功能,而且在输入文本时,键盘可以弹起.话不多说,上界面看看. wxml实现如下: < ...
微信小程序中嵌套html_微信小程序：web-view嵌套H5实现微信支付功能解决方案及填坑...
ab7117c7d4947210c39e126a01d23ede.jpg 最近一个多月加班比较严重,偶尔休息一天也是在补睡眠+陪家人,比较长时间没有来进行总结记录了.今天不加班,开始为这段时间做的东西 ...

小程序中实现待办功能

定义变量

组件搭建

数据绑定

事件绑定

总结

小程序中实现待办功能相关推荐

最新文章

热门文章