效果
描述:点击加号按钮,增加一组输入框;点击减号按钮,减少一组输入框。
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
})
},
})