Mbos移动端开发——标签

栏目:s-hr cloud知识作者:金蝶来源:金蝶云社区发布:2024-09-16浏览:1

Mbos移动端开发——标签

1 基础功能使用

1.1 创建页面

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

图片 1.webp

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

图片 2.webp

图片 3.webp


预览效果

图片 4.webp

1.2 方案切换

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

图片 5.webp

图片 6.webp

预览效果:

图片 7.webp

1.3 删除标签

图片 8.webp

1.4 新增标签

1.4.1 新增标签控件

图片 9.webp

1.4.2 绑定字段

图片 10.webp

图片 11.webp

图片 12.webp

1.5 修改标签样式

1.5.1 直接修改样式属性

图片 13.webp

1.5.2 选择预置标签方案

图片 14.webp

1.6 控制显示、隐藏

mbos('confirmState').hide()

mbos('confirmState').show()

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

图片 15.webp

图片 16.webp

2 功能拓展

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

图片 17.webp

2.1 不同value显示不同的样式

2.1.1 自定义标签字段

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

图片 18.webp

图片 19.webp

 

2.1.2 获取枚举列表数据

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

图片 20.webp

图片 21.webp

图片 22.webp

2.1.3 根据alias匹配value

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

图片 23.webp

图片 24.webp

2.1.4 根据value定义class

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

图片 25.webp

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

图片 26.webp

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

图片 27.webp

2.1.5 自定义样式

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

图片 28.webp

效果如图:

图片 29.webp

图片 30.webp

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

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

图片 31.webp

2.2.1 根据alias匹配value

同2.1.1、2.1.2、2.1.3

2.2.2 布尔类型值处理

定义布尔类型多语言数组

图片 32.webp

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

图片 33.webp

image.webp

2.2.3 绑定属性

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

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

图片 34.webp

绑定属性并赋值:

图片 35.webp

图片 36.webp

2.2.4 显示、隐藏控制

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

图片 37.webp


Mbos移动端开发——标签

1 基础功能使用1.1 创建页面新建应用后,选择列表模式:带图双列列表、单操作列表以单操作列表为例创建页面:预览效果1.2 方案切换切换...
点击下载文档
确认删除?
回到顶部
客服QQ
  • 客服QQ点击这里给我发消息