用户登录

2019 前端开发训练营(09/01— 09/10),查看详情 / 报名参加 →

在这个标签上再添加点文字 .. 显示已经选择的购物车项目里的商品数量还有总计的金额 ..

先回到购物车页面 .. 找到使用标签栏组件的地方 .. 再给它添加两个属性 .. 一个是 text .. 值是 tabBarText .. 再添加一个 textPrimary .. 值是 tabBarTextPrimary .. 在组件里可以根据这两个属性为文字设置不同的样式 .. 比如 textPrimary 文字可以加粗显示 ..

在 render 上面 .. 再去定义这个 tabBarText .. 它的值是一个字符模板 .. 里面是 quantity 的值,加上一个 件 ..

再添加一个 tabBarTextPrimary .. 它的值也是字符模板 .. 人民币符号 .. 加上一个 total ..

在上面再去定义一个 quantity ,表示商品的件数 .. 它的值我们用一个方法生成 .. this.sumItems .. 方法接收几个参数 .. 一个是项目 .. 第二个是对比的项目 .. 第三个是对比的属性 .. 第四个是要合计的属性的名字 ..

复制一份 .. 再添加一个 total .. 要合计的属性的名字是 total ..

tabBarTextPrimary 有警告 .. 是因为下面这个属性的值应该是 tabBarTextPrimary .. 不是 textBar .

然后去定义 sumItems 这个方法 .. 方法有几个参数 .. items .. compareItems .. compare .. 还有 prop ..

方法里面添加一个 result .. 它的值 map 一个 items .. 当前项目叫 item .. 然后做一下判断 .. compareItems includes 看看是不是包含 item .. compare .. 如果是,就 return item .. prop ..

如果不包含 .. 就 return 一个 0 ..

方法最终要返回合计之后的值 .. 用一下 result .. reduce .. 一个回调 .. v1 .. v2 .. 返回的是 v1 加 v2 的值 .. 初始值是 0 ..

下面再回到这个标签栏组件 ..

在组件里面 .. 添加一个 textItem .. 里面用一个 View .. 加上 tab-bar__item 还有 tab-bar__item-text ..

显示的文字判断一下 text .. 如果有值就显示一个 Text 组件 .. 组件上面加上 text-muted .. 文字是 text ...

复制一份 .. 判断 textPrimary .. 如果有,就添加一个 Text .. 组件上面使用 text-bold 这个类,让文字加粗 .. 再加上一个 ml-2 .. 左边添加点外边距 .. 文字是 textPrimary ..

再把需要的 text .. 还有 textPrimary .. 从组件的属性里面解构出来 ..

找到组件的视图 .. 要显示 textItem .. 可以判断 .. text 或者 textPrimary .. 有任何一个值,都可以显示 textItem ..

在文件顶部 .. 导入需要的 Text 组件 ..

回到模拟器,可以试一下 .. 勾选购物车项目 .. 标签栏上的文字会显示商品件数还有总共的金额 ..

这个文字的样式再调整一下 ..

在 tab-bar 样式里 .. 设置一下 tab-bar__item--text 的样式 ..

先用 hairline-top 这个 mixin 添加一个上边的边框 .. 再用 font-size 设置一下字号 .. flex 设置成 2 ...

padding-top 添加点上边的内边距 .. 大小是 $spacing-v-lg ..

回到 app.scss ,保存 ... 重新编译样式 .. 再到模拟器上预览一下 ..

这个文字里还用到了一个文字工具类 .. 打开 utilities .. text.scss .. 在里面,添加一个 text-bold .. 它的样式,用 font-weight ,值是 bold ,让文字加粗 ..

保存一下 app.scss .. 再去预览一下 ...

购物车页面标签栏:文字项目(件数与金额)《 电商小程序案例:购物车页面 》

统计

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

社会化网络

关于

微信订阅号

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