你帮我做一个微信小程序 table表格组件,需要展示全部代码
时间: 2024-01-15 17:03:07 浏览: 30
好的,下面是一个简单的微信小程序 table 表格组件的代码:
1. 在 pages 目录下创建一个新页面,命名为 table,创建一个 table.wxml 文件用于渲染界面,内容如下:
```
<view class="table">
<view class="row header">
<view class="cell">Name</view>
<view class="cell">Age</view>
<view class="cell">Gender</view>
</view>
<block wx:for="{{data}}" wx:for-index="index" wx:key="index">
<view class="row">
<view class="cell">{{item.name}}</view>
<view class="cell">{{item.age}}</view>
<view class="cell">{{item.gender}}</view>
</view>
</block>
</view>
```
2. 在 table 目录下创建一个 table.js 文件,用于处理业务逻辑,代码如下:
```
Page({
data: {
data: [
{ name: 'Lucy', age: 18, gender: 'Female' },
{ name: 'Tom', age: 22, gender: 'Male' },
{ name: 'Jack', age: 25, gender: 'Male' },
{ name: 'Lily', age: 20, gender: 'Female' }
]
}
})
```
3. 在 table 目录下创建一个 table.wxss 文件,用于处理样式,代码如下:
```
.table {
width: 100%;
border-collapse: collapse;
border: 1px solid black;
font-size: 16px;
}
.row {
display: flex;
border: 1px solid black;
}
.header {
font-weight: bold;
background-color: #eee;
}
.cell {
flex: 1;
text-align: center;
padding: 5px;
}
```
这样就完成了一个简单的微信小程序 table 表格组件,可以根据自己的需求进行修改。