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

最新推荐文章于 2025-06-04 13:00:22 发布

12程序猿

最新推荐文章于 2025-06-04 13:00:22 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_26383975/article/details/107310220

本文介绍了如何在微信小程序中实现动态添加和删除自定义选项的功能。通过点击‘添加选项’来新增输入框，并能通过点击输入框左侧的减号图标删除相应选项。详细代码实现包括wxml、js和wxss部分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

一、功能介绍

点击“添加选项”，新增自定义选项输入框；
点击选项输入框左侧的“减号图标”可以删除该行输入框。

二、代码实现

先看效果图
在这里插入图片描述
1.wxml 代码

<!--pages/packageA//selfdefine-option/selfdefine-option.wxml-->
<view class="main">
  <view wx:for="{
   
   {options}}" wx:key="{
   
   {index}}">
     <view class="option-item">
       <image class="img" src="../images/delete.png" data-id="{
   
   {index}}" bindtap = "delOption" />
       <input type="text" data-id="{
   
   {index}}" value="{
   
   {item.value}}" placeholder="请输入选项" bindinput="bindinput"/>
     </view>
  </view>
  <view>
    <view