微信小程序入门（四）：页面数据展示

大家都知道，针对一款app上面都是展示信息的，那么在小程序中，页面上信息的展示是如何的，接下来进行详细探索：

在微信小程序中，编写页面布局是在wxml文件中进行的，则在wxml文件中，使用<view></view>标签进行内容的包裹，类似html中的<div>,现在进行一个需求的编写，在页面上编写布局，并将.js结尾文件中的处理数据进行展示到页面上；

index.wml

index.js

编译项目，则页面展示如下：

从上面结果可以知道在wxml文件中使用{{**}}可以将js文件中指定的内容展示在页面上，现在我们进行动态的展示数据，不需要展示起在page-data中固定的内容,修改js文件内容:

编译项冲逗目，显示结果如图：

由此可知，在js中动态的设置内容并将其更新到wml上，则使用 this.setData()，且修改的内容格式符合key:value。

就小程序页面数据展示就分析到这里，希望各位棚判渣看官们有所收获，有什链悄么错误的地方还望指出！！

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

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

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

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

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

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

Towify 支持在循环容器无限嵌套，展示多表关联数据，实现复杂数据的展示。

效果展示

通过使用循环容器的循环条目嵌套循环容器，同时创建一个存在多表关联字段的数据表，实现电影列表中电影标签展示。

效果图

创建数据表

注意：在数据中心你可以创建属于自己应用程序的数据表格，数据表格类型分为用户表、商品表、订单表和自定义表，本次案例使用的是自定义表

点击数据中心

创建一个“标签”数据表

创建一个哗数“电影”数据表，同时多表关联“标签”数据表

创建事件

注意：事件是构建数据与界面元素组件链接的抽象逻辑。数据表与界面元素组件通过事件连接。

点击事件中心

创建事件

触发器配置

注意：在检查器面板中的触发器设置面板创建触发器，可以对组件进行交互逻辑设置，或配合事件来进行动态数据 *** 作。

选中根容器中的循环容器

点击检查面板中的触发器

创建触发器

绑定数据

注意：绑定数据可以将事件返回的数据和组件显示内容进行绑定。

选中循环容器的列表条目

点击检态轿查面板中的乱闭首数据绑定与设置

绑定数据

选中循环容器的列表条目中的循环容器的列表条目

点击检查面板中的数据绑定与设置

绑定数据

这样就可以通过在Towify 中展示多表关联数据，实现复杂数据的展示了。

---