微信小程序添加、删除元素
大家好，今天我们来学习一下添加、删除元素，好好看，好好学，超详细的。（纯前端）
直接上代码吧（里面有字体图标，小伙伴自己到图标库去找，我用的是阿里的图标库）
<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
})
}
}
},
如图所示：
结语
关于微信小程序添加、删除元素就介绍到这里 ，欢迎大家多多指教，互相交流，一起学习