用户登录

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

之前我们创建的两个标签栏组件里面,使用的 css 类名字不太规范 .. 下面去改进一下 ..

回到编辑器 .. 打开购物车页面的标签栏组件 .. 在这个元素上的这个 tab-bar 指的就是一个区块 .. 两个下划线后面的 item 指的是元素 .. 元素后面用了两条小横线连接了一个 icon .. 两条小横线连接的东西应该是修饰符 .. 不过这里的 icon 不应该是修饰符,它应该是个元素 .. 所以,可以把两条小横线换成一条 ..

或者去掉前面的 item .. 表示 tab-bar 区块里的 icon 元素 ..

下面这个类名来自 Taro UI .. 你会发现它也是这么命名的 .. at-tab-bar 是区块 .. icon 是元素 ..

再找到下面的 textButtonItem .. 去掉 item 还有后面的两条小横线 .. text-button 可以作为 tab-bar 区块里的一个元素 ..

然后去掉 textItem 这块视图里的这个 item 两条小横线 ..

这个 at-tab-bar--fixed 来自 Taro UI .. 两条小横线后面的 fixed 就是修饰符 .. 在它里面定义的样式会让这个标签栏固定在页面上 ..

下面再打开 product 页面上用的标签栏组件 ..

去掉这里的 item-- 直接让 icon 作为 tab-bar 里的一个元素 ..

再打开 tab-bar 组件的样式 ..

修改一下类的名字 .. 去掉 item-- .. 还有 text-button 前面的 item -- 还有下面的 text 前面的 item--

再搜索一下 tab-bar .. 把它们都替换成 & ...

选中除了第一个样式的所有样式 .. 剪切一下 .. 把它们嵌套在第一个样式里面 .. 第一个样式的 & 符号换成 .tab-bar ..

这样它里面嵌套的样式 .. & 符号会被编译成 tab-bar ..

打开 app.scss .. 保存一下这个样式表 .. 重新编辑样式 ..

回到模拟器,可以再预览一下页面上的标签栏 ..

改进:按 BEM 命名方法修改标签栏类的名字《 电商小程序案例:购物车编辑 》

统计

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

社会化网络

关于

微信订阅号

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