《微信小程序开发》课件——第3章 微信小程序页面交互_100-168.pdf

03【案例3-3】美食列表

案例分析

“美食列表”微信小程序的页面效果见右图。

美食列表包含多条美食信息，每条美食信息左

侧为美食图片，右侧为美食详细信息，包括美

食名称、电话、地址和营业时间。

案例分析

“美食列表”微信小程序中包含上拉触底加载数据和下拉刷新两个功能。

①当用户上拉美食列表页时，如果页面即将到达底部，会自动加载更多数据；

②当用户下拉页面时，如果到达顶部后进行下拉操作，可以刷新页面。

知识储备

1.列表渲染

先定一个小

目标！

掌握列表渲染，能够运用列表渲染将数

组中的数据渲染到页面中

知识储备

1.列表渲染

什么是列表渲染？

知识储备

1.列表渲染

列表渲染通过wxfor控制属性来实现。

微信小程序进行列表渲染时，会根据列表中

数据的数量渲染相应数量的内容。

知识储备

1.列表渲染

在wxfor控制属性所在标签的内部，可以使用item

变量获取当前项的值，使用index变量获取当前项

的数组索引或对象属性名。

如果不想使用item和index这两个变量名，还可以

通过wxfor-item控制属性更改item的变量名；通

过wxfor-index控制属性更改index的变量名。

知识储备

1.列表渲染

wxkey控制属性

wxfor控制属性通常搭配wxkey控制属性使用。

wxkey控制属性用于为每一项设置唯一标识，这样可以在数据改变后页面重新渲染时，使

原有组件保持自身的状态，而不是重新创建，这样可以提高列表渲染的效率。

知识储备

1.列表渲染

如果item本身就是一个具有唯一性的字符串或数字，

则可以将wxkey的值设置为*this，*this表示item本身。

设置

wxkey

如果给定的数据是一个由对象作为数组元素构成的数

组，那么可以将wxkey的值设置为对象中的一个“值

具有唯一性”的属性的名称。

知识储备

1.列表渲染

数组的列表渲染

步骤1在pages/index/index.js文件的Page({})中编写页面数据。

data{

步骤2arr[a,b,c]

}

知识储备

1.列表渲染

数组的列表渲染

步骤1在pages/index/index.wxml文件中编写页面结构，通过列表渲染的

方式将arr数组渲染到页面中。

viewwxfo