微信小程序自定义字段实现选项的动态添加和删除

时间:2024-03-19 12:10:01

问题描述:
在自定义选项中,点击添加选项按钮,会出现一个选项的输入框,输入的选项可以通过点击左侧的减号删除

效果如图:
微信小程序自定义字段实现选项的动态添加和删除
解决过程:
1.首先写出大体的框架。在pages下,建立了一个selfdefine的文件夹,在wxml中写出静态结构
微信小程序自定义字段实现选项的动态添加和删除

selfdefine.wxml
微信小程序自定义字段实现选项的动态添加和删除
说明:
optionsList是一个数组,数组是由对象组成的,对象包含一个msg的属性,用来绑定用户输入的选项的信息,类似:
微信小程序自定义字段实现选项的动态添加和删除

selfdefine.js
微信小程序自定义字段实现选项的动态添加和删除
点击添加选中之后,会触发addOption函数,这时候获取到data中的optionsList,给它增加一个对象,设置msg为空字符串
生成选项的框出现后,在输入选项的框中输入文字之后,通过bindinput绑定的option_con函数将填写的内容绑定到对应的msg中
微信小程序自定义字段实现选项的动态添加和删除
e.currentTarget.dataset.id是获取填写的选项对应的optionsList的下标
e.detail.value是获取到的填写的选项的内容
当我们增加了若干个选项之后,若想删除其中某一个选项,在删除的时候需要知道删除的是哪一个,因为bindtap绑定函数时不能传入参数,因此可以给删除图片绑定一个id,这个id是optionsList循环时的下标,即wxml中的data-id="{{index}}",点击时触发deleteOption函数
微信小程序自定义字段实现选项的动态添加和删除