微信小程序如何动态添加内容（小程序动态添加组件）

微信小程序动态添加内容的方法；

1.wx:for循环视图加一，wx:for的内容就加一。那么，循环的内容是通过数字还是数组来循环的呢？

2.输入是循环的，因此不可能将不同的bindInput事件绑定到不同的输入。如果只绑定了一个输入事件，并且所有值都必须是一个数组，则必须用input获取视图块的索引，然后通过索引值修改数组中的值。。

3.如果删除了，如果循环的内容是一个数字，那么只有数字减一，只有最后一个会被删除。那么循环的内容只能是一个数组。只需获取当前需要删除的索引值，然后删除循环内容的相应值即可。

我们先来看看效果:

wxml:

增删（1）循环数组是数组。

（2）之所以将data-idx属性添加到delete和input中是因为需要当前索引值。

wxss:

。添加{ display:inline -块；line -高度:30px填充:0 12px背景:天蓝色；}.box { margin -top:10px；明确:两者都有；溢出:隐藏；填充:0 15px}。B-ipt { overflow:hidden；边框:1px纯色# ccc}.del { width:40px；float:右；margin -left:10px；}js:

data:{ array:【0】，//显示一个input val:【】//默认情况下所有输入的内容}，//获取输入getinputval的值:function（e）{ varnowidx = e . current target . dataset . idx；//获取当前索引var val = e . detail . value；//获取输入值var old val = this . data . input val；old val【now idx】= val；//修改对应索引值this . setdata（{ input val:old val }）的内容}，//Add input addinput:function（）{ varold = this . data . array；old . push①；//无论这里推送的是什么，都只是将数组长度增加1。this . setdata（{ array:old }）}，//Delete input delinput:function（e）{ var now idx = e . current target . dataset . idx；//当前索引var oldinputval = this . data . input val；//所有输入值varoldar = this . data . array；//循环内容oldar . splice（now idx，1）；//删除当前索引的内容，以便可以删除视图。拼接（nowidx，1）；//如果在//view中删除了相应的输入值，则在If（oldar。length《1）{ oldar =【0】//如果循环内容长度为0，则将其删除，并且必须保留默认值。在这里，只要OLDAR是长度为1的数组，其中的值就是whatever } this . setdata（{ Array:OLDAR，input val:oldinputval }）}（1）Array【0】意味着它首先需要循环一次，因为wx:for是根据数组的长度进行循环的。随便写数组的内容，只要保证长度为1。

（2）如果担心每次输入时获取索引值会影响性能，我建议您可以将获取输入值的事件从bindinput更改为bindblur。没问题。

以上就是微信小程序如何动态添加内容的细节。更多资讯请关注主机参考等相关文章！

这几篇文章你可能也喜欢：

• 如何给微信小程序动态添加内容（Dynamically add dom to mini program）

本文由主机参考刊发，转载请注明：微信小程序如何动态添加内容（小程序动态添加组件） https://zhujicankao.com/102504.html