需求:默认有一组输入框,可动态添加,支持删除!(ui基于vant-weapp)
wxml
<view class="cash_container">
<view class="input_groups bg_page pa_10">
<view class="input_item bg_white mb_10" wx:for="{{inputList}}" wx:for-item="inputItem" wx:key="index">
<van-field label="面值(元)" value="{{inputItem.parValue}}" type="digit" data-index="{{index}}" bind:change="onParValueChange"
placeholder="请输入" required clearable />
<van-field label="数量(张)" value="{{inputItem.num}}" type="digit" data-index="{{index}}" bind:change="onNumChange"
placeholder="请输入" border="{{false}}" required clearable />
<view class="del_wrap" data-index="{{index}}" bindtap="onDelete" wx:if="{{index !== 0}}">
<van-icon name="delete" color="#FF3F35" />
</view>
</view>
<van-button icon="plus" type="info" bind:click="onAdd">添加面值</van-button>
</view>
<view class="btn_wrapper tc pa_20">
<button class="btn_gradient" bindtap="onSubmit">提 交</button>
</view>
<van-notify id="van-notify" />
</view>
js
import Notify from '../../../miniprogram_npm/@vant/weapp/notify/notify';
Page({
/**
* 页面的初始数据
*/
data: {
listId: '',
inputList: [{
parValue: '',
num: ''
}]
},
onParValueChange: function (e) {
let val = e.detail,
i = e.currentTarget.dataset.index,
item = this.data.inputList[i];
item['parValue'] = val;
console.log(item);
},
onNumChange: function (e) {
let val = e.detail,
i = e.currentTarget.dataset.index,
item = this.data.inputList[i];
item['num'] = val;
console.log(item);
},
// 添加面值
onAdd: function () {
let obj = {
parValue: '',
num: ''
},
list = this.data.inputList;
list.push(obj);
this.setData({
inputList: list
});
console.log(this.data);
},
// 删除面值
onDelete: function (e) {
let i = e.currentTarget.dataset.index,
list = this.data.inputList;
console.log(i);
list.splice(i, 1);
this.setData({
inputList: list
});
},
// 提交
onSubmit: function (e) {
console.log(this.data)
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
if (options) {
this.setData({
listId: options.listId
});
wx.setNavigationBarTitle({
title: options.title
})
}
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
wxss
.input_item {
position: relative;
padding: 10rpx;
border-radius: 5px;
}
.input_item .del_wrap {
position: absolute;
top: 0;
right: 0;
padding: 10rpx;
}
引入vant-weapp 组件的json
{
"usingComponents": {
"van-row": "@vant/weapp/row/index",
"van-col": "@vant/weapp/col/index",
"van-field": "@vant/weapp/field/index",
"van-notify": "@vant/weapp/notify/index",
"van-icon": "@vant/weapp/icon/index",
"van-button": "@vant/weapp/button/index"
}
}