微信小程序开发踩坑集锦（四）（注意点-排版）

实现目的：

利用微信小程序原生框架，使用云开发数据库，实现表格的规范显示。

目标效果如下图：

数据库该记录内容：

问题描述：

如何实现每个小单元格中的多行显示？

解决思路：

将solution数组和reason数组每个元素对应，这里以“；”分割，用split方法，将这solution、reason字符串分割为元素个数相同的一维数组，然后在solution中，以“|”分割成二维数组，对应显示就行

关键部分：

①wxss中的排版，对view进行宽度限定，自动换行的不可少部分：white-space：pre-line

②wxml中的排版，block组件，注意根据两个block中间是否有换行，显示排版也不同。（这个比较奇怪，一般wxml中是不会区分有无换行的）

例如：

<text class="textHint">(注）</text><block wx:for="{{hint}}" wx:key="item" wo:for-item="index">{{item}}
		</block>

效果如下图：

wxml中，不换行（注意比较，可能两个代码段区别不怎么明显）

<text class="textHint">(注）</text><block wx:for="{{hint}}" wx:key="item" wo:for-item="index">{{item}}</block>

效果如下图：

总结：

多做笔记，避免忘记