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

如何动态向微信小程序添加内容：

1.当wx:for循环视图中加1时，wx:for的内容就加1了。增量。 之后的循环是使用数字进行循环还是数组？

2.输入是循环出来的，所以不能将不同的bindInput事件绑定到不同的输入。 在这种情况下，只能绑定一个输入事件，并且所有值都必须是数组。 获取包含输入的视图块的索引，并使用索引值更改数组中的值。 。

3、删除时，如果循环的内容是数字，则只将数字减1，只删除最后一个。 在这种情况下，循环仅包含一个数组。 获取需要删除的索引值，删除循环内容对应的值，就完成了。

我们先看一下效果：

wxml:

添加 删除

(1) 循环数组 这是一个数组

(2) data[ k3]idx 属性被添加到删除和输入中。 这是因为两者都需要使用当前索引值。

wxss:

.add{ 显示: inline- 块; 行- 高度: 30px; 填充: 0 12px; 背景: 天蓝色;}.box{ margin[k3 ]顶部：10px；清晰：两者； 溢出：隐藏；填充：0 15px；}.b-ipt{ 溢出：隐藏；边框：1px 实线#ccc；}.del{ 宽度：40px；边距-左：10px； p>js:

data: { array:[0],//默认显示一个inputVal:[]//所有input的内容},//input的值 getInputVal:f​​​​ unction (e){ var nowIdx=e.currentTarget.dataset.idx;//获取当前索引 var val=e.detail.value;//获取输入值 var oldVal=this.data. 输入值;/ /改变对应索引值的内容 this.setData({inputVal:oldVal })},//添加 inputaddInput:function(){ var old=this.data.array; old.push(1);//这里无论推送什么，数组长度都会加1 long as this.setData({ array: old })},//删除inputdelInput:function(e){ var nowidx= e.currentTarget.dataset.idx;//当前索引 var oldInputVal=this.data.inputVal;//所有输入值 var oldarr= this.data.array;//循环内容 oldarr.splice(nowidx,1); //删除当前索引的内容，以便视图可以删除 oldInputVal.splice(nowidx ,1) );//视图删除对应的输入值也必须删除 if (oldarr.length < 1) { oldarr = [0] //如果循环内容的长度为0，则删除，所以应该离开默认值。 这里，内部值可以是任何值，只要 oldarr 是一个数组并且长度为 1 即可。 } this.setData({ array:oldarr, inputVal: oldInputVal })}

(1) array[0] 需要先循环一次，因为 wx :for 是根据数组的长度进行循环的。 请随意写入数组的内容，只要长度为1即可。

(2) 如果您担心每次键入时检索索引值对性能的影响，您可能需要执行以下操作： 可以获取输入值事件由bininput变为bindblur。 没关系。

下载微信App

微信是一款支持通过手机网络发送语音消息、视频、照片和文字的移动通讯软件。 微信带来了全新的移动通信体验，您可以单独或群组聊天，还可以根据您的地理位置查找附近的人。 有需要的朋友，请快来保存您的下载体验吧！

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

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

本文由主机参考刊发，转载请注明：如何给微信小程序动态添加内容（Dynamically add dom to mini program） https://zhujicankao.com/123494.html