一起创业网-为互联网创业者服务

小程序表格怎么画

在微信小程序中绘制表格可以通过以下步骤实现:

新建界面并插入多个view元素

打开微信开发者工具,新建一个界面。

在界面中插入多个`view`元素,并为这些`view`元素添加`class`属性,以便后续设置样式。

设置表格的表头和表体样式

在对应的`wxss`文件中,设置表格的表头(`th`)和表体(`td`)的样式。例如,可以设置边框、字体大小、背景颜色等属性。

动态生成表格数据

在`index.js`文件中,定义一个数组来存储表格数据。

编写方法将数组中的数据动态生成到表格中。可以使用`wx.request`从服务器获取数据,并将其绑定到表格上。

保存代码并在模拟器中预览效果

保存代码并在微信开发者工具的模拟器中预览效果,检查表格的显示是否符合预期。

index.wxml

```html

姓名

性别

年龄

操作

李四

22

编辑

张三

30

编辑

王五

25

编辑

```

index.wxss

```css

.table {

border: 1px solid ccc;

width: 100%;

border-collapse: collapse;

}

.tr {

display: flex;

justify-content: center;

height: 40px;

}

.th, .td {

border: 1px solid ccc;

padding: 10px;

text-align: center;

}

.th {

background-color: f2f2f2;

}

```

index.js

```javascript

Page({

data: {

tableData: [

{ name: '李四', gender: '男', age: 22 },

{ name: '张三', gender: '女', age: 30 },

{ name: '王五', gender: '男', age: 25 }

]

},

onLoad: function () {

this.initTableData();

},

initTableData: function () {

var that = this;

var html = '';

this.data.tableData.forEach(function (item) {

html += '';

html += '' + item.name + '';

html += '' + item.gender + '';

html += '' + item.age + '';

html += '编辑';

html += '';

});

document.querySelector('.table').innerHTML = html;

}

});

```

通过以上步骤和示例代码,你可以在微信小程序中绘制一个简单的表格。根据实际需求,你可以进一步自定义表格的样式和功能。