在小程序中插入表格的方法 - 行业资讯 - 肥雀云

　　介绍

这篇文章将为大家详细讲解有关在小程序中插入表格的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

我们可以在微信小程序视图容器视图中通过flex布局实现表格样式。

flex是灵活的盒子的缩写,顾名思义为“弹性布局”,用来为盒装模型提供最大的灵活性。

任何一个容器都可以指定为flex布局。

表。以前wxml

& lt; view 类=皌able"比; 　　& lt;才能view 类=皌r bg-w"比; 　　,,,& lt; view 类=皌h"祝辞head1 　　,,,& lt; view 类=皌h"祝辞head2 　　,,,& lt; view 类=皌h “祝辞head3 　　& lt;才能/view> 　　& lt;才能block 天气:为=皗{listData}},,天气:关键=皗{代码}}“比; 　　,,,& lt; view 类=皌r bg-g",天气:如果=皗{index %, 2,==, 0}}“比; 　　,,,,,& lt; view 类=皌d"在{{item.code}} & lt;/view> 　　,,,,,& lt; view 类=皌d"在{{item.text}} & lt;/view> 　　,,,,,& lt; view 类=皌d"在{{item.type}} & lt;/view> 　　,,,& lt;/view> 　　,,,& lt; view 类=皌r",天气:else> 　　,,,,,& lt; view 类=皌d"在{{item.code}} & lt;/view> 　　,,,,,& lt; view 类=皌d"在{{item.text}} & lt;/view> 　　,,,,,& lt; view 类=皌d"在{{item.type}} & lt;/view> 　　,,,& lt;/view> 　　& lt;才能/block> 　　& lt;/view>

表。wxs

页面({
　　,,数据:{
　　,,,listData:(
　　,,,,,{“code":“01”、“text":“text1",“type":“type1"},
　　,,,,,{“code":“02“,“text":“text2",“type":“type2"},
　　,,,,,{“code":“03”,“text":“text3",“type":“type3"},
　　,,,,,{“code":“04”、“text":“text4",“type":“type4"},
　　,,,,,{“code":“05”,“text":“text5",“type":“type5"},
　　,,,,,{“code":“06“,“text":“text6",“type":“type6"},
　　,,,,,{“code":“07年“,“text":“text7",“type":“type7"}
　　,,,)
　　,,},
　　onLoad才能:function  (), {
　　,,,console.log (& # 39; onload # 39;),
　　,,}
　　
　　})

效果图如下

在小程序中插入表格的方法

关于在小程序中插入表格的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。