在微信小程序中创建动态表格可以通过以下步骤实现:
初始化数据
在小程序的逻辑层(JavaScript)中,初始化需要展示的数据,通常存储在`data`对象中。例如:
```javascript
data: {
listData: []
}
```
读取数据
在页面的`onLoad`生命周期函数中,读取数据并更新`listData`。例如:
```javascript
onLoad: function (options) {
var that = this;
// 模拟从服务器获取数据
for (var i = 1; i <= 10; i++) {
var obj = {
termNo: i,
prinAmt: 1000,
intAmt: 1000,
totAmt: 2000
};
that.data.listData.push(obj);
}
that.setData({ listData: that.data.listData });
}
```
渲染表格
在小程序的视图层(WXML)中,使用`wx:for`循环读取逻辑层的数据,并渲染到前端。例如:
```xml
```
添加和删除行
在视图层添加加号和减号图片,并通过事件监听触发逻辑层的数据增减。例如:
```xml
```
在逻辑层中实现`addRow`和`removeRow`函数:
```javascript
addRow: function () {
var that = this;
var newItem = {
termNo: this.data.listData.length + 1,
prinAmt: 0,
intAmt: 0,
totAmt: 0
};
that.data.listData.push(newItem);
that.setData({ listData: that.data.listData });
},
removeRow: function () {
var that = this;
if (this.data.listData.length > 0) {
that.data.listData.pop();
that.setData({ listData: that.data.listData });
}
}
```
设置表格样式
在小程序的样式文件(WXSS)中,使用flex布局设置表格样式,并添加必要的边框属性。例如:
```css
.table-container {
display: flex;
flex-direction: column;
}
.table-row {
display: flex;
justify-content: space-between;
padding: 10px;
border-bottom: 1px solid ccc;
}
```
通过以上步骤,你可以在微信小程序中创建一个动态表格。根据实际需求,你还可以进一步优化表格的样式和功能,例如添加排序、筛选等功能。