第五章“我的要点”微信app云开发示例-从云获取数据主页

现在，让我们从云端获取数据，并在主页上完成世界页面索引的创建。主页分为四个数据列表导航页面。页面的具体内容如下：

推荐：为用户推荐最新的点击弹出信息，包括文本点击弹出内容和语音点击弹出内容。

文本突发：文本突发内容被过滤掉，仅显示文本突发内容。

突发语音：过滤掉突发语音内容，只显示突发语音内容。

流行列表：将前20个流行内容纳入列表。

[在实现页面中数据列表的滚动和导航切换后，每个导航下的数据列表位于顶部]

由于我们使用的标题导航栏是通过数据绑定在同一页面上切换的，因此当页面中的数据列表向下滚动时，页面的scrollTop值在切换导航后发生了变化。因此，当从滚动导航数据列表切换到另一个导航数据列表时，当前导航数据列表不能保持在顶部，而是包含一个scrollTop值。现在我们将实现导航切换，数据列表是顶部位置。

在wxml中，可滚动尝试区域的滚动视图组件用作数据列表的容器。在wxml中，scroll-y=“true”组件被设置为y轴滚动。同时，通过数据绑定滚动条=“｛｛scrollTop｝｝”设置垂直滚动条的位置，并设置组件的绝对定位样式。

<滚动视图scroll-y=“true”滚动顶部=“｛｛scrollTop｝｝”>

在js中，我们将scrollTop的初始值设置为0，以便在打开页面时滚动条位于顶部

数据：{

scrollTop:0，

}

在每次导航切换期间，scrollTop的值将重新分配为0，以确保当前导航页面的滚动条位于顶部。

this.set数据({

滚动顶部：0

})

[数据列表加载功能的实现]

使用wx:for将控件属性绑定到组件中的数组，并使用数组中每个项的数据重复渲染组件。

Wx:for item指定数组当前元素的变量名，将数据ID指定给Wx:key以提高渲染效率，并将数据ID分配给ID属性以便于跳转到详细信息页面。

块标记，使用块标记进行条件渲染，它不是组件。它只是一个包装元素。它不会在页面中进行任何渲染，只接受控件属性。使用块标记进行条件渲染是一个不错的选择。

wx:对于item=“推荐”wx:key=“｛｛recommende_id｝｝”id=“｛{recommerde_id}”>

｛｛recommende.text｝｝

当然，我们也可以在组件中直接使用wx:if。例如，在文档分解中，我们可以控制只显示文本类型的分解文档

wx:对于item=“textbao”wx:key=“｛｛textbao._id｝｝”id=“｛{textbao.detailId｝”

wx:if=“｛｛textbao.text｝｝”>

初始化数据中的阵列阵列，以保存从数据库中获得的推荐爆炸数据

数据：{

tarray:[]，

}

OrderBy指定按逆时间顺序排序，limit指定查询结果集的最大数量为20，即从数据库开始只获得20条数据，通过上拉加载获得更多数据

//推荐数据

数据库集合（'bao'）。orderBy（'time'，'desc'）.限制（20）

.get（）；

上拉加载：设置一个lnum1变量来记录当前页面上有多少条数据。每次你拉起以获得10条数据时，使用skip来实现更多的拉起加载。Skip指定返回的结果从指定序列之后的结果开始

//推荐数据

数据库集合（'bao'）。orderBy（'wtime'，'desc'）.skip（lnum1）.limit（10）

.get（）；

指数wxml完整代码

<标签>

data index=“｛｛index｝｝”wx:key=“unique”bindtap=“navbarTap”>{｛item｝｝

bindsrolltower=“thebottom”>

wx:对于item=“推荐”wx:key=“｛｛recommende_id｝｝”id=“｛{recommerde_id}”>

<；/图像>

｛｛recommende.text｝｝

<