电商小程序案例:购物车页面

2020.03.11 17:03:34
39
阅读约 2 分钟
Scroll down

这个章节我们会一步一步的自定义一个购物车项目组件 … 组件可以更好的展示购物车里的项目 … 设计组件的视图 … 样式 … 还有处理组件的事件 …

然后在购物车页面上再添加一个标签栏 … 在上面添加两个按钮 … 还有一个文字项目 … 文字项目上会显示勾选的购物项目的商品数量还有总共的金额

购物车页面 #

自定义购物车项目组件 #

在项目下面创建一个新的组件,放在 components … cart-item-list 下面 …
img
在组件的 render 方法里面,从组件的属性里解构一些东西 … items … selected … 还有 className … 它们都在 this.props 里面 …

再添加一个 rootClassValue … 它的值可以用一下 classNames 方法生成 … 添加一个 list 类 … 还有 className …

在文件顶部导入需要的 classNames … 来自 classnames 模块 …

回到组件视图 … 在这个包装上添加一个 className 属性,它的值是 rootClassValue …

下面用一下 items 的 map … 迭代一下 items 里的值 … 一个 item 参数,还有一个 index 参数 … 在 map 方法里 … 从 item 里解构出来一些东西 …

product_id ,重命名为 value … 还有 name … 重命名为 title … item 里还有 image … price … quantity … total …

这个 map 每次迭代的时候 return 的是一个 View … 在这个组件上添加一个 key … 它的值是 value … 再添加一个 className … 它的值是 classValue … 在上面再定义一个 classValue …

它的值用 classNames 生成 … 里面可以添加一个 list__item … 等会儿会用到这个类去添加一些自定义的样式 …

先在它里面添加一个 title …

阅读:39 . 字数:408 发布于 7 个月前
Copyright 2018-2020 Siques