如何在微信小程序中插入可编辑的表格？

本文共计662个文字，预计阅读时间需要3分钟。

我们可以在微信小程序的视图容器View中使用flex布局实现表格样式。Flex布局（Flexible Box），简称Flex，意为弹性布局，它是一种在容器中能够灵活地分配空间、对齐项目的布局方式。任何容器都可以指定为Flex布局，容器内的项目（子元素）可以任意排列。例如，将一个容器指定为Flex布局后，可以给其中的项目指定main axis（主轴）和cross axis（交叉轴）的方向，以及项目在主轴和交叉轴上的对齐方式。

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

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

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

table.wxml

<view class="table"> <view class="tr bg-w"> <view class="th">head1</view> <view class="th">head2</view> <view class="th ">head3</view> </view> <block wx:for="{{listData}}" wx:key="{{code}}"> <view class="tr bg-g" wx:if="{{index % 2 == 0}}"> <view class="td">{{item.code}}</view> <view class="td">{{item.text}}</view> <view class="td">{{item.type}}</view> </view> <view class="tr" wx:else> <view class="td">{{item.code}}</view> <view class="td">{{item.text}}</view> <view class="td">{{item.type}}</view> </view> </block> </view>

table.wxss

.table { border: 0px solid darkgray; } .tr { display: flex; width: 100%; justify-content: center; height: 3rem; align-items: center; } .td { width:40%; justify-content: center; text-align: center; } .bg-w{ background: snow; } .bg-g{ background: #E6F3F9; } .th { width: 40%; justify-content: center; background: #3366FF; color: #fff; display: flex; height: 3rem; align-items: center; }

table.js

Page({ data: { 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('onLoad') } })

效果图如下

推荐：《小程序开发教程》

以上就是如何在小程序中插入表格的详细内容，更多请关注自由互联其它相关文章！