利用请求回来的数据创建产品列表(AtList、AtListItem)

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

假设请求接口成功 .. 可以执行一下 this.setState .. 设置一下组件的状态 .. 一个对象 .. 里面添加一个 products .. 对应的值是 response.data ..

在这个组件里面,再添加一个 state 属性 .. 一个对象 .. 里面添加一个 products .. 它是一个数组 ..

在 taro-ui 里面,可以把 AtList 还有 AtListItem 这两个组件拿出来 .. 然后找到组件的 render 方法 ..

const .. products .. 等于 this.state ,把 products 从组件的 state 里拿出来 ..

添加一个列表 .. 用一组 AtList .. 做一下循环 .. 用一下 products .. map .. 当前项目叫 product .. 返回的是列表里的项目 .. 列表项目用一下 AtListItem ..

组件上面有些属性 .. 先设置一下组件的 key .. 值可以是 product.id .. arrow .. 设置成 right ,在项目右边显示一个箭头 ..

thumb 可以设置一个小的缩略图 .. product.images 里的第一个项目,它的 src 是图像的地址 ..

title 是列表的标题 .. product.name .. 再添加一个 note .. 它的值可以先添加一个人民币符号 .. 加上 product 里的 price .. 产品的价格 ..

现在模拟器上会显示一个产品列表 .. 这个列表是用 Taro ui 里的 AtList 还有 AtListItem 组件创建的 ..

利用请求回来的数据创建产品列表(AtList、AtListItem)《 电商小程序案例:准备 》

统计

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

社会化网络

关于

微信订阅号

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