用户登录

在这个标签栏上可以再添加一个文字类型的按钮 .. 使用这个组件的时候 .. 提供一个 textButton 属性 .. 它的值就是按钮上的文字 ..

回到这个组件 ..

复制一份 secondaryItem .. 修改一下名字 .. 换成 textButtonItem .. 包装上再添加一个类 .. tab-bar__item--text-button ..

点击处理绑定的参数 .. 第二个参数是 textButton .. 第三个参数是 textButton ..

去掉按钮上的 type 属性 .. 按钮文字是 textButton

下面再整理一下解构属性的代码 .. 换成多行 .. 里面再添加一个 textButton ..

再找到组件视图 .. 找个地方输出 textButtonItem .. 先判断一下 textButton .. 如果有值就显示 textButtonItem ..

现在这个标签栏上会显示一个文字按钮 ..

按钮的 disabled 属性可以暂时先去掉 ..

然后去设计一下样式 .. 打开 assets .. style 下面的 tab-bar 样式 .. 在样式里面,添加一个 tab-bar__item--text-button .. @include .. 用一下 hairline-top 这个 mixin .. 在元素的顶部添加一个边框 ..

回到模拟器预览一下 ..

购物车页面标签栏:文字按钮《 电商小程序案例:购物车页面 》

统计

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

社会化网络

关于

微信订阅号

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