网站首页 >> 牛刀云小程序开发 >> 第1篇制作模式 >> 页面制作 >> 内容组件

2.3.5.9 徽章

    徽章组件用来显示一个圆角的文本,常用来显示角标,如图4-5-12所示。

4-5-12  徽章组件

1、基础属性

         徽章组件提供2个基础属性:文本属性和动态文本属性。

l  文本属性用于显示静态文本

l  动态文本属性用于显示动态文本,动态文本包括数据集中的文本数据、根据情景显示不同的文本。

2、事件

    徽章组件提供1个事件:单击事件,在单击文本组件时触发。

3、样式

徽章组件常用的样式有3个:

l  背景颜色:设置徽章的底色,默认为红色

l  文字颜色:设置徽章文字的颜色,默认为白色

l  定位方式:徽章组件用作角标时,需设置定位方式为绝对定位

4、示例

在购物车图标右上角显示角标。关于定位方式样式参考“4.3.4组件样式”一节中的定位方式。首先添加一个视图组件,用作角标的相对定位组件,设置定位方式为相对定位。然后在视图组件中分别放图标组件和徽章组件,图标组件选择购物车图标,徽章组件的动态文本设置为购物车数据集中数量列的合计值,设置定位方式为绝对定位,用鼠标在设计界面中拖动徽章组件到购物车图标右上角合适的位置即可。组件结构及属性设置如图4-5-13所示。

4-5-13  显示角标