微信小程序开发--3.6js动态增删输入框

效果

描述：点击加号按钮，增加一组输入框；点击减号按钮，减少一组输入框。

wxml

<view class="cu-list margin margin-bottom-xl" style="height:auto;background-color:#fff;border-radius:10rpx;padding-bottom:40rpx;">
            <view class="goods_detail_title text-xl" style="height:auto;padding-left:40rpx;padding-right:40rpx;">
                <view class="price_text text-xl">
                    <text>包含服务</text>
                    <button style="width:40rpx;height:40rpx;padding:0;background-color:#A6AEDF;color:#fff;margin-left:500rpx;margin-top: -40rpx;" bindtap="onAddRow">+</button>
                    <button style="width:40rpx;height:40rpx;padding:0;background-color:#A6AEDF;color:#fff;margin-left:560rpx;margin-top: -40rpx;" bindtap="onRemoveRow">-</button>
                </view>
                <block wx:for="{
   
   {dataRowList}}" wx:key="index">
                    <view style="border:4rpx solid #A6AEDF;border-radius:30rpx;margin-top:20rpx;padding-bottom:20rpx;padding-left:20rpx;">
                        <view class="flex">
                            <text style="margin-top:20rpx;">名称：</text>
                            <input type="text" data-rownum="{
   
   {index}}" bindchange="bindOfserviceNameChange" name="serviceName" style="padding-left:10rpx;margin-top:20rpx;border:2rpx solid #ccc;border-radius:20rpx;width:450rpx;height:60rpx;"/>
                        </view>
                        <view class="flex">
                            <text style="margin-top:20rpx;">数量：</text>
                            <input type="text" data-rownum="{
   
   {index}}" bindchange="bindOfAmountChange" name="amount" style="padding-left:10rpx;margin-top:20rpx;border:2rpx solid #ccc;border-radius:20rpx;width:450rpx;height:60rpx;"/>
                        </view>
                        <view class="flex" >
                            <text style="margin-top:20rpx;">价值：</text>
                            <input type="text" data-rownum="{
   
   {index}}" bindchange="bindOfPriceChange" name="price" style="padding-left:10rpx;margin-top:20rpx;border:2rpx solid #ccc;border-radius:20rpx;width:450rpx;height:60rpx;"/>
                        </view>
                    </view>
                </block>
            </view> 
    </view>

wxss

.goods_detail_title{
  width: 100%;
  height: 420rpx;
  background-color: #fff;
  margin: 0rpx auto;
  border-radius: 20rpx;
  /* padding-left: 40rpx; */
  padding-top: 30rpx;
}
.price_text{
  width: 200rpx;
}

js

var app = getApp();
Page({
    data: {
        dataRowList: [{serviceName:'',amount:'',price:'',id:0,hasUsed:false}],
    },

    bindOfserviceNameChange:function(e){
        var rownum=e.currentTarget.dataset.rownum;    
        var datalist=this.data.dataRowList;
        datalist[rownum].serviceName=e.detail.value;
        this.setData({
            dataRowList:datalist,    
        })
    },

    bindOfAmountChange:function(e){
        var rownum=e.currentTarget.dataset.rownum;    
        var datalist=this.data.dataRowList;
        datalist[rownum].amount=e.detail.value;
        this.setData({
            dataRowList:datalist,    
        })
    },

    bindOfPriceChange:function(e){
        var rownum=e.currentTarget.dataset.rownum;    
        var datalist=this.data.dataRowList;
        datalist[rownum].price=e.detail.value;
        this.setData({
            dataRowList:datalist,    
        })
    },
    
    onLoad: function onLoad() {},

    onShow: function (options) {},

    onAddRow: function (e) {
        console.log(this.data.dataRowList)
        var datalist=this.data.dataRowList;
        datalist.push({serviceName:'',amount:'',price:'',id:datalist.length,hasUsed:false});
        this.setData({
          dataRowList:datalist
        })
      },
      
      onRemoveRow: function (e) {
        var datalist=this.data.dataRowList;
        if(datalist.length>1)
          datalist.pop(datalist.length);
        this.setData({
          dataRowList:datalist
        })
      },
})