微信小程序添加、删除元素（附带图片）

男娘i 2023-01-17 09:17 240阅读 0赞

# 微信小程序添加、删除元素 #

> 大家好，今天我们来学习一下添加、删除元素，好好看，好好学，超详细的。（纯前端）

直接上代码吧（里面有字体图标，小伙伴自己到图标库去找，我用的是阿里的[图标库][Link 1]）

<view class="wrap" wx:for="{ {productList}}" wx:key="id">
        <view class="wrap-titleItem border">
          <view class="wrap-title">商品</view>
          <view class="wrap-input">
            <view class="input-item">
              <view class="input" style="flex: 1;">
                <input style="padding-left: 20rpx;" type="text" placeholder-class="placeholder" placeholder="请输入商品" data-idx='{ {index}}' value='{ {productList[index].allName}}' id="allName" bindinput='bindChanguser' />
              </view>
            </view>
          </view>
        </view>
        <view class="wrap-titleItem border">
          <view class="wrap-title">价格</view>
          <view class="wrap-input">
            <view class="input-item">
              <view class="text-item">￥</view>
              <view class="input" style="flex: 1;">
                <input style="padding-left: 20rpx;" type="number" placeholder-class="placeholder" placeholder="价格" data-idx='{ {index}}' value='{ {productList[index].price}}' id="price" bindinput='bindChanguser' />
              </view>
            </view>
          </view>
        </view>
    
        <view class="wrap-titleItem border">
          <view class="wrap-title">人数</view>
          <view class="wrap-input">
            <view class="input-item">
              <view class="text-item">满</view>
              <view class="input" style="width: 100rpx;">
                <input style="padding-left: 20rpx;" type="number" placeholder-class="placeholder" placeholder="多少" bindblur="blur" data-idx='{ {index}}' value='{ {productList[index].people}}' id="people" bindinput='bindChanguser' />
              </view>
              <view class="text-item">人</view>
            </view>
          </view>
        </view>
    
        <view class="wrap-titleItem">
          <view class="wrap-title">时间限制</view>
          <view class="wrap-input">
            <view class="input-item" style="width:100%;">
              <view class="input" style="width: 70rpx;">
                <input type="number" placeholder-class="placeholder" placeholder="时间" maxlength="4" data-idx='{ {index}}' value='{ {productList[index].time}}' id="time" bindinput='bindChanguser' />
              </view>
              <view class="text-item">分钟后失效</view>
            </view>
          </view>
        </view>
    
        <view class="wrap-iconItem">
          <view class="add-item" style="color: rgb(0, 131, 198);display:{ { productList.length === 1?'none':'block'}};" data-idx='{ {index}}' bindtap="delList">
            <text class="iconfont iconhuishouzhan" style="font-size: 24rpx;"></text>删除商品
          </view>
          <view class="add-item" style="color: rgb(0, 131, 198);display:{ { productList[index].showView?'none':'block'}}" data-idx='{ {index}}' bindtap="onAdd">
            <text class="iconfont iconplus1" style="font-size: 24rpx;"></text>添加商品
          </view>
        </view>
      </view>

.wrap { 
      width: 100%;
      border-radius: 20rpx;
      font-size: 28rpx;
      background-color: #fff;
      margin-top: 20rpx;
      padding-bottom: 30rpx;
    }
    
    .wrap-titleItem { 
      width: 100%;
      height: 120rpx;
      line-height: 120rpx;
      border-bottom: 2rpx solid rgb(181, 181, 181);
      display: flex;
      padding-right: 20rpx;
    }
    
    .wrap-title { 
      height: 100%;
      width: 200rpx;
      color: rgb(16, 16, 16);
      font-size: 32rpx;
      padding-left: 30rpx;
      border: 0rpx solid red;
    }
    
    .wrap-input { 
      flex: 1;
      border: 0rpx solid red;
      padding-left: 50rpx;
      color: rgb(125, 125, 125);
    }
    
    .wrap-input input { 
      height: 100%;
      width: 100%;
    }
    
    .input-item { 
      height: 100%;
      border: 0rpx solid red;
      display: flex;
    }
    
    .text-item { 
      height: 100%;
      line-height: 120rpx;
      float: left;
      color: #000;
    }
    
    .input { 
      height: 100%;
      float: left;
    }
    
    .border { 
      border-bottom: 2rpx solid #b5b5b5;
    }
    
    .wrap-iconItem { 
      width: 100%;
      line-height: 50rpx;
      font-size: 28rpx;
      text-align: center;
      color: rgb(16, 16, 16);
      margin-top: 20rpx;
      opacity: 0.6;
      display: flex;
      justify-content: center;
    }
    
    .add-item { 
      width: 45%;
      font-size: 24rpx;
      border: 0rpx solid red;
    }

data: { 
    	 productList: [{ 
          "allName": '',
          "price": '',
          "people": '',
          "time": '',
          "showView": false
        }], //活动商品
    },
    //添加活动商品
      onAdd(e) { 
        let productList = this.data.productList;
        let checkboxList = this.data.checkbox;
        let index = e.currentTarget.dataset.idx;
        console.log(productList[index].allName)
        if (productList[index].price == '' || productList[index].people == '' || productList[index].time == '' || productList[index].allName == '') { 
          wx.showToast({ 
            title: '请填写完内容，再添加活动商品',
            icon: 'none',
            duration: 2000
          })
        } else { 
          // console.log(index)
          let newData = { 
            "allName": '',
            "price": '',
            "people": '',
            "time": '',
            "showView": false
          };
          if (productList.length >= 5) { 
            wx.showToast({ 
              title: '最多添加5个商品',
              icon: 'none',
              duration: 2000
            })
            return;
          }
          productList.push(newData);
          console.log(this.data.productList[index].showView)
          this.data.productList[index].showView = !this.data.productList[index].showView;
          console.log(this.data.productList[index].showView)
          this.setData({ 
            productList,
          })
        }
    
      },
    
      // 删除元素
      delList(e) { 
        var nowidx = e.currentTarget.dataset.idx; //当前索引
        var newList = this.data.productList[nowidx];
        console.log(this.data.productList[nowidx])
        if (nowidx > 0) { 
          if (newList.showView === false) { 
            this.data.productList[nowidx - 1].showView = false;
          }
        }
    
        var productList = this.data.productList;
        productList.splice(nowidx, 1);
        this.setData({ 
          productList
        })
      },
    
        //获取input的值
        bindChanguser(e) { 
          console.log(e.detail.value)
          let productList = this.data.productList;
          var index = e.currentTarget.dataset.idx; //获取当前索引
          var type = e.currentTarget.id; //状态
          let value = e.detail.value;
          console.log(type);
          productList[index][type] = value
          if (type == 'time' && value >= 1440) { 
            console.log(type)
            wx.showToast({ 
              title: '时间限制范围为1~1440',
              icon: 'none',
              duration: 2000
            })
            return;
          }
        },
      
        blur: function (e) { 
          let productList = this.data.productList;
          var index = e.currentTarget.dataset.idx;
          var type = e.currentTarget.id;
          if (type == 'people') { 
            if (productList[index].people <= 1) { 
              productList[index].people = ''
              this.setData({ 
                productList: productList
              })
              wx.showToast({ 
                title: '拼团人数不能少于2人',
                icon: 'none',
                duration: 2000
              })
            }
          }
        },

>  如图所示：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70]

## 结语 ##

> 关于微信小程序添加、删除元素就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习

[Link 1]: https://www.iconfont.cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNzE1MzU0_size_16_color_FFFFFF_t_70]: /images/20221021/e0d71dd23927479297f2e7b26cdb33b4.png