更新时间:2024-07-30 GMT+08:00
自定义会控按钮
- 自定义新增按钮。底部工具栏按钮、共享工具栏和更多菜单中的按钮支持第三方开发者自定义添加。目前底部工具栏和共享工具栏限制自定义按钮个数为1,超出的自定义按钮会移入更多菜单,自定义底部/共享工具栏按钮的顺序固定在“更多”按钮前;自定义更多菜单按钮会在底部和共享工具栏更多按钮中同时生效,底部工具栏的更多菜单中自定按钮添加在菜单栏最后,共享工具栏的更多菜单中自定按钮添加在“离开”按钮前。
- 删除自定义按钮。通过Config接口删除customButton中的按钮配置,关于清空自定义按钮操作,若赋值customButton:[],则清空全量自定义按钮;若customButton下未配置某位置下的自定义按钮,则清空该位置下的自定义按钮。
- 自定义按钮子菜单功能说明:
- 当 subMenu 为空时,点击按钮通知对应按钮 id 被点击;
- 当 subMenu 不为空时,点击按钮显示 subMenu 二级菜单,并且不通知;
通过Config接口增删改自定义按钮时,需要传对应位置的全量自定义按钮,支持动态刷新底部/共享工具栏,更多菜单不支持,而是在重新生成时刷新。刷新单个自定义按钮请参考刷新自定义按钮配置。
- 增加自定义按钮
以添加自定义带子菜单的底部工具栏按钮、共享工具栏按钮和更多菜单按钮为例:
{ "frame":{ "confMenu":{ "toolBar":{ "customButton": [ { "id": "customMenu", "title": "自定义按钮", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 1, "subMenu":[ { "id": "customSecondMenu", "title": "二级菜单", "buttonImg": "D:/demoResource/icon-whiteboard.svg" } ] }, { "id": "customMore", "title": "自定义更多", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 0 }, { "id": "customShare", "title": "自定义共享", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 2 } ] } } } }
- 更新自定义按钮
注意确保id和buttonPos正确,修改按钮的其他信息。以重命名底部工具栏按钮为例:
{ "frame":{ "confMenu":{ "toolBar":{ "customButton": [ { "id": "customMenu", "title": "重命名按钮", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 1, "subMenu":[ { "id": "customSecondMenu", "title": "二级菜单", "buttonImg": "D:/demoResource/icon-whiteboard.svg" } ] }, { "id": "customMore", "title": "自定义更多", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 0 }, { "id": "customShare", "title": "自定义共享", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 2 } ] } } } }
- 删除部分自定义按钮
customButton删除对应按钮,同时需要保留其他自定义按钮。以删除底部工具栏自定义按钮为例:
{ "frame":{ "confMenu":{ "toolBar":{ "customButton": [ { "id": "customMore", "title": "自定义更多", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 0 }, { "id": "customShare", "title": "自定义共享", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 2 } ] } } } }
- 清空某个位置下的自定义按钮
customButton中删除该位置下的所有自定义按钮即可,若customButton下未配置某位置下的自定义按钮,则会清空该位置下的自定义按钮。以清空底部工具栏自定义按钮为例:
{ "frame":{ "confMenu":{ "toolBar":{ "customButton": [ { "id": "customMore", "title": "自定义更多", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 0 }, { "id": "customShare", "title": "自定义共享", "buttonImg": "D:/demoResource/icon-whiteboard.svg", "buttonPos": 2 }, ] } } } }
- 清空全量自定义按钮
customButton传入空数组,会清空所有位置下自定义按钮。清空示例如下:
{ "frame":{ "confMenu":{ "toolBar":{ "customButton": [ ] } } } }
父主题: 界面定制