微信小程序,组件增加删除
发表时间:2020-9-24
发布人:葵宇科技
浏览次数:69
微信小程序,组件增加删除
使用this.data.obj.splice(x,1);时,虽然数组的值去掉了,但是页面是不会生效的,必须使用this.setData()来使页面刷新。
下面给出两种做法:
1、temp来搭桥,并重新赋值,使页面生效
2、直接设置
js
Page({
data: {
obj:[],
obj1:['1111111','222222','333333']
},
/***增加组件 */
onTapAdd:function(e){
var temp=this.data.obj;
var temp1=this.data.obj1;
temp.push(temp1[temp.length]);
this.setData({
obj:temp
})
},
/***** 可以修改删除指定组件*/
onTapDel:function(e){
//重点在这,必须搭桥,要定义一个新变量temp
var temp = this.data.obj;
//this.data.obj.splice(x,1);该做法虽然数组去掉了,但是页面是不会生效的
temp.splice(temp.length,1);
//重设即可生效
this.setData({
obj: temp
})
/**
或者直接setData
this.setData({
obj: this.data.obj.splice(this.data.obj.length,1)
})
*/
},
})
wxml
<!--example/deleteComponent/deleteComponent.wxml-->
<view>
<button bindtap='onTapAdd'>添加input组件</button>
<button bindtap='onTapDel'>删除Input组件</button>
<view>
<block wx:for="{{obj}}" wx:key="*this" >
<text>{{item}}</text>
</block>
</view>
</view>