用户登录

现在我们去做一个产品列表,这个列表可以放在小程序的首页上显示 .. 打开 pages/index/index.wxml .. 先暂时把之前我们在首页上添加的这个幻灯片注释掉 ..

数据

打开首页的主逻辑 .. 先准备一下产品列表需要的数据 .. 我已经在小程序启动以后把应用需要的所有数据都准备好了 .. 放在了小程序的 globalData 里面 ..

在首页的数据里先添加一个 entities ,先让它等于 null,这个 entities 表示的就是一些内容 ..

然后在 onLoad 方法里面,用了 setData 去设置了一些数据 .. 这里再添加一个 entities .. 对应的值就是 app.globalData 里面的 vehicles ..

一般你可以在页面的onLoad 方法里 .. 去对应用的后端接口请求数据 .. 得到数据以后可以再用一下 setData 去设置一下 .. 这样页面就会显示我们请求回来的数据了 ..

每次请求回新的数据以后,你都可以使用页面的 setData 这个方法去设置一下 .. 这样页面会重新被渲染,显示更新之后的数据 ..

我们可以再去看一下产品列表里的数据的形状 .. 在 assets 下面,打开 db.json ..

vehicles 里面的东西就是我们要显示的一组产品 .. 它表示汽车 .. 每个项目都有一个 id ,每个内容的 id 属性的值都不一样 ..

header 是内容的标题 .. sub_header 是子标题 .. description 是描述 .. image 是一个产品图片地址 ..

meta 里面还有一些内容 .. price 是产品的价格 .. carbon_dioxide [daɪˈɑ:ksaɪd] 表示汽车的每公里的二氧化碳的排放克数 .. fuel 指的是百分里的耗油量 ..

exterior_design 是一组数据,我们会在产品的详情页面上用到 .. 它表示的是汽车的外部的设计 .. 最后还有一个 interior_design ,它指的是汽车的内饰的设计 ...

每个项目都有自己的 header 标题,description 描述 .. 还有一个 image 图片 ...

产品列表:数据《 微信小程序:案例 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点