微信小程序开发之——制作表格
2021/11/11 14:39:51
本文主要是介绍微信小程序开发之——制作表格,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一 概述
表格样式一 | 表格样式二 |
---|---|
二 绘制过程
- 外层设置
display:table
,并设置border-collapse
表格边框模型 - 表头设置
display:table-row
,单元格设置为display:table-cell
- 每一行单元格同表头设置
三 示例代码
3.1 table.wxml(布局文件)
<view class="su-table-box"> <view class="su-table"> <!-- 表格标题 --> <view class="su-tr"> <view class="su-th" wx:for="{{list.th}}" wx:key="index">{{item}}</view> </view> <!-- 表格内容 --> <view class="su-tr" wx:for="{{list.td}}" wx:for-item="tdinfo" wx:key="index"> <view class="su-td" wx:for="{{tdinfo}}" wx:key="index_">{{item}}</view> </view> </view> </view>
3.2 table.wxss(样式文件)
.su-table-box { height: 100%; overflow-x: auto; padding-bottom: 40rpx; } .su-table { margin: 0 auto; display: table; border-collapse: collapse; overflow-x: auto; word-break: keep-all; white-space: nowrap; background-color: #FFFFFF; width: 90%; border-radius: 20rpx; } .su-tr { display: table-row; } .su-th { display: table-cell; height: 60rpx; line-height: 60rpx; text-align: center; border: 1rpx solid #DDDDDD; border-right: none; border-bottom: none; background-color: #87CEFA; color: #FFFFFF; } .su-td { padding: 0rpx 30rpx; display: table-cell; height: 60rpx; line-height: 60rpx; text-align: center; border: 1rpx solid #DDDDDD; border-right: none; }
3.3 table.js(设置表格展示数据)
onLoad: function (options) { const list = { // 表格标题 th: ["时间", "得分"], // 表格内容 这里只能使用 数组套数组格式 td: [ [ "2021-11-03 13:36", "10" ], [ "2021-11-02 10:28", "9" ], [ "2021-11-01 08:30", "8" ], [ "2021-10-31 07:30", "7" ], ], } this.setData({ list }) },
四 参考代码
- CSDN下载-参考代码
这篇关于微信小程序开发之——制作表格的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-12-20微信小程序开发入门指南
- 2024-12-20小程序 createCameraContext() 怎么实现识别条形码功能?-icode9专业技术文章分享
- 2024-11-22微信小程序的接口信息py可以抓到吗?-icode9专业技术文章分享
- 2024-11-22怎样解析出微信小程序二维码带的参数?-icode9专业技术文章分享
- 2024-11-22微信小程序二维码怎样解析成链接?-icode9专业技术文章分享
- 2024-11-22微信小程序接口地址的域名需要怎么设置?-icode9专业技术文章分享
- 2024-11-22微信小程序的业务域名有什么作用-icode9专业技术文章分享
- 2024-11-22微信小程序 image有类似html5的onload吗?-icode9专业技术文章分享
- 2024-11-22微信小程序中怎么实现文本内容超出行数后显示省略号?-icode9专业技术文章分享
- 2024-11-22微信小程序怎么实现分享样式定制和图片定制功能?-icode9专业技术文章分享