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

小沐°

已于 2023-07-20 11:30:01 修改

阅读量563

点赞数 1

分类专栏：微信小程序文章标签：前端微信小程序小程序

于 2023-07-19 14:15:35 首次发布

本文链接：https://blog.csdn.net/weixin_46479909/article/details/131807744

版权

微信小程序专栏收录该内容

30 篇文章 1 订阅

订阅专栏

该代码示例展示了如何在微信小程序中实现点击加号和减号按钮动态增加或减少输入框。WXML部分定义了界面布局，包括加减按钮和输入框。JS部分处理按钮点击事件，添加或移除数据行，并更新界面数据。WXSS则定义了样式。

摘要由CSDN通过智能技术生成

效果

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

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;
}

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
        })
      },
})