Mbos移动端开发——标签

1 基础功能使用

1.1 创建页面

新建应用后，选择列表模式：带图双列列表、单操作列表

以单操作列表为例创建页面：

预览效果

1.2 方案切换

切换列表卡片方案，可调整标签位置

预览效果：

1.3 删除标签

1.4 新增标签

1.4.1 新增标签控件

1.4.2 绑定字段

1.5 修改标签样式

1.5.1 直接修改样式属性

1.5.2 选择预置标签方案

1.6 控制显示、隐藏

mbos('confirmState').hide()

mbos('confirmState').show()

因为id重复，此方法只能显示、隐藏第一个标签

2 功能拓展

因为字段数据经过mbos处理后，枚举类型、布尔类型的字段，只返回文本，未返回状态值，所以较复杂的控制，需要结合代码实现。

2.1 不同value显示不同的样式

2.1.1 自定义标签字段

新增普通字段作为标签样式字段，隐藏标题，增加样式类

2.1.2 获取枚举列表数据

根据标签字段元数据，获取枚举列表，接口："/mbos/data/getEnum?enumtype="+元数据

2.1.3 根据alias匹配value

匹配标签字段值与枚举值，并返写列表数据

2.1.4 根据value定义class

给标签字段绑定格式化函数，可设置标签的HTML

选择自定义函数，定义函数名称

js文件中写入对应函数方法，返回需要的HTML片段，并根据value定义class类

2.1.5 自定义样式

在css文件中，编写样式代码

效果如图：

2.2 其他字段控制显示、隐藏

例如：根据布尔字段，控制标签类字段的显示隐藏

2.2.1 根据alias匹配value

同2.1.1、2.1.2、2.1.3

2.2.2 布尔类型值处理

定义布尔类型多语言数组

匹配数据，重新赋值给列表数据

2.2.3 绑定属性

将需要的状态值绑定到HTML属性上。

选中列表区域，查看HTML源码

绑定属性并赋值：

2.2.4 显示、隐藏控制

通过属性、样式控制标签是否显示