小程序动态添加dom
时间: 2023-09-16 17:14:22 浏览: 49
小程序中可以通过 `setData` 方法动态更新页面数据,并且小程序的数据绑定机制会自动更新页面中绑定了该数据的 DOM 元素。因此,可以通过修改数据来实现动态添加 DOM。
假设我们要在一个列表中动态添加一条数据,可以先定义一个数组,在 `onLoad` 生命周期函数中初始化该数组,然后在需要添加数据的时候,往数组中添加数据,最后通过 `setData` 方法更新数据即可。
示例代码如下:
```
Page({
data: {
list: [] // 初始化列表数据
},
onLoad() {
// 在onLoad生命周期函数中初始化列表数据
this.setData({
list: [
{ id: 1, name: '张三' },
{ id: 2, name: '李四' },
{ id: 3, name: '王五' }
]
})
},
addData() {
// 在需要添加数据的函数中,往数组中添加新的数据
const newList = [...this.data.list, { id: 4, name: '赵六' }]
// 更新数据,自动更新页面中绑定了该数据的 DOM 元素
this.setData({
list: newList
})
}
})
```
在上面的示例代码中,我们在 `addData` 函数中向 `list` 数组中添加一条数据,并通过 `setData` 方法更新数据。这样就可以动态添加 DOM 了。
阅读全文