小程序怎么做table切换效果

wxml代码：

<view class="container">

<view class="table">

<view class="tr">

<view class="th">标题1</view>

<view class="th">标题2</view>

<view class="th">标题3</view>

<view class="th">标题4</view>

<view class="th">标题5</view>

</view>

<view class="tr" wx:for="{{5}}">

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

<view class="td">{{内容}}</view>

</view>

</view>

</view>

wxss代码：

/* pages/table/table.wxss */

page {

font-size: 14px

color: #333

}

.table {

border:1px solid #dadada

border-right: 0

border-bottom: 0

width: 98%

}

.tr {

width: 100%

display: flex

justify-content: space-between

}

.th,.td {

padding: 10px

border-bottom: 1px solid #dadada

border-right: 1px solid #dadada

text-align: center

width:100%

}

.th {

font-weight: 400

background-color: #dadada

}

1、双击打开微信小程序开发工具，新建一个对应的界面，然后插入多个view元素，并添加class属性，如下图所示：

2、没有给这些view样式，然后保存代码并预览效果，结果出现从上到下排列，如下图所示：

3、在对应的wxss文件中，设置表格的表头和表体的样式，如下图所示：

4、再次保存代码并在模拟器中预览效果，发现形成了表格，如下图所示：

5、在thtd添加一个border-bottom属性，设置底部边框属性，如下图所示：

6、结果发现最后一行的底部边框展示的有点粗，是因为table和td设置了边框，加粗了，如下图所示：

今天小编和大家一起学习的是如何在微信小程序中制作动态处理表格?一定有许多朋友很是期待吧，下面就是详细的内容。

想在小程序里实现如上的UI，遇到这几个问题：

小程序中整体的排版

小程序里是没有table标签的，需要自己实现

下方的加号可以实现增加一行数据

下方的减号可以实现减去一行数据

首先，小程序视图层XML，通过wx:for循环读取逻辑层的数据，把数据渲染到前端:

然后，逻辑层中，初始化需要展示的数据：

table的CSS通过flex设置样式:

然后，下方的加号减号图片，都通过侦听点击，触发事件，使得逻辑层改变数据：

最后，逻辑层收到事件后，更改table中的表格数据，通过setData函数更新视图层：

以上就是如何在微信小程序中制作动态处理表格的全部内容了

---