微信小程序之获取后台动态数据表格布局display:table

猿来独往 2018-09-02

本文没有采用flex布局和grid布局来设置表格的，而是通过 display: table;来设置。

一方面工作中经常用到这种自适应表格排版布局方式（包括方框列表及九宫格式），但是flex布局和grid布局来设置的话就很容易了，

这次想通过另一种方法来实现，而且这种方法比较少用，所以想尝试一下，分享给大家。

如果对这个属性不熟的可以参考这篇文章，介绍的很详细：css Table布局-display:table

（一）实现效果
1、第一种实现效果：

注意：这是截图才看得到左边或右边的边框的，真机环境是看不到的哈
2、第二种实现效果：

（二）实现过程
以第一种实现效果代码为准说明：
CSS属性的情况：

table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签
<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签
<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）

1、通过设置js里面的数组对象格式模拟动态后台获取的数据，然后将数组对象内容以三个元素为一组组成数组对象格式再合并成一个新的数组对象格式，之所以这样做就是为了，一行有三个单元格设计的:

Page({data: {tableData: [{ //模拟动态获取到的后台数据：数组对象格式id: 0,name: 'table-th-cell'},{id: 1,name: 'table-th-cell'},{id: 2,name: 'table-th-cell'},{id: 3,name: 'table-tr-cell'},{id: 4,name: 'table-tr-cell'},{id: 5,name: 'table-tr-cell'},{id: 6,name: 'table-tr-cell'},{id: 7,name: 'table-tr-cell'},{id: 8,name: 'table-tr-cell'},],threeArray: '', //模拟将后台获取到的数组对象数据按照一行3个的单元数据的格式切割成新的数组对象（简单的说：比如获取到数组是9个元素，切分成，3个元素一组的子数组）},onLoad: function() {let that = this;let threeArray = [];// 使用for循环将原数据切分成新的数组for (let i = 0, len = that.data.tableData.length; i < len; i += 3) {threeArray.push(that.data.tableData.slice(i, i + 3));}console.log(threeArray);that.setData({threeArray: threeArray})},
})

2、设置wxml:

<view class="table"><block wx:for='{{threeArray}}' wx:key='*this' wx:for-item='oneArray'>
<!-- 注意嵌套的数组对象 --><view class="table-tr" wx:if='{{index<1}}'><block wx:for='{{oneArray}}' wx:key='id'><view class="table-th">{{item.name}}</view></block></view><view class="table-tr" wx:else><block wx:for='{{oneArray}}' wx:key='id'><view class="table-td">{{item.name}}</view></block></view></block>
</view>

3、设置wxss:

.table {display: table;width: 100%;/* border-collapse 属性设置表格的边框是否被合并为一个单一的边框，解决相邻单元格边框未合并导致有些边框变粗的视觉效果 */border-collapse: collapse;overflow-x: hidden;
}.table-tr {display: table-row;width: 100%;height: 200rpx;
}.table-th {display: table-cell;font-weight: bold;border: 1px solid black;text-align: center;vertical-align: middle;background-color: #ccc;
}.table-td {display: table-cell;border: 1px solid black;text-align: center;vertical-align: middle;
}

总的来说，实现过程并不复杂，学会了可以使用很熟练的使用，这个方法实现表格布局还是挺有用的，在一些页面无缝接触的时候很常用。
————————————————
版权声明：本文为CSDN博主「猿来独往」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_35324453/article/details/82318621

微信小程序之获取后台动态数据表格布局display:table相关推荐

微信小程序之获取表单数据
前言:微信小程序中很多地方运用到了表单,很多时候我们需要把表单中的内容提取出来返回给后台,这里我随便写了一点注意点: 1.所有的input textarea button全部包含在form表单元素 ...
小程序获取运动步数php,微信小程序怎么获取php页面数据？
如何获取微信小程序用户openid onLaunch: function(){ var that = this var user=wx.getStorageSync('user') || {}; va ...
关于微信小程序与Java后台交互数据中中文乱码问题的讨论
小程序端请求参数中含有中文如果小程序端发起的请求参数中含有中文,直接发送到后台会显示乱码,需要在header中设置UTF-8编码 wx.request({url: app.globalData.se ...
微信小程序实现会议邀请函海报、表格布局等
理解经纬度坐标的含义. 掌握位置和地图控制等系列接口的用法.利用所学知识制作会议邀请函小程序. 根据素材中的"中国计算机学会"人工智能应用与发展报告会海报制作一个简易的会议邀请函小 ...
微信小程序批量获取input的输入值，监听输入框，数据同步
微信小程序批量获取input的输入值,监听输入框,数据同步在使用小程序时,跟vue的数据绑定不一样,没有v-model这个属性了,官网也只是给了一些事件监听. 但是我们如果有多个表单时,需要写多个事 ...
许嵩音乐智能问答系统微信小程序之获取数据及文本分类
许嵩音乐智能问答系统微信小程序之获取数据及文本分类项目简介. 音乐播放器搭建. 获取数据及文本分类. 智能客服聊天界面. 连接前端微信小程序输入和后端python,并返回值连接知识图谱数据获取 ...
微信小程序缓存获取数据教程
微信小程序缓存获取数据教程每个微信小程序都可以有自己的本地缓存,可以通过 wx.setStorage(wx.setStorageSync).wx.getStorage(wx.getStorageSy ...
微信小程序调用php,微信小程序调用PHP后台接口解析纯html文本
微信小程序调用php后台接口,解析纯html文本,效果图片预览 1.微信js动态传参: wx.request({ url: 'https://m.****.com/index.php/home/xia ...
Java小程序post如何传参,微信小程序向Java后台传输参数的方法实现
微信小程序向Java后台传输参数的方法实现首先,微信小程序我使用的是微信web开发者工具想要向后台传输数据,需要在js中写在微信小程序的官方文档中可以看到一个api叫wx.request它的作用 ...

微信小程序之获取后台动态数据表格布局display:table

微信小程序之获取后台动态数据表格布局display:table

微信小程序之获取后台动态数据表格布局display:table相关推荐

最新文章

热门文章