更新时间:2024-04-01 GMT+08:00
分享

自定义会控按钮

  1. 自定义新增按钮。底部工具栏按钮、共享工具栏和更多菜单中的按钮支持第三方开发者自定义添加。目前底部工具栏和共享工具栏限制自定义按钮个数为1,超出的自定义按钮会移入更多菜单,自定义底部/共享工具栏按钮的顺序固定在“更多”按钮前;自定义更多菜单按钮会在底部和共享工具栏更多按钮中同时生效,底部工具栏的更多菜单中自定按钮添加在菜单栏最后,共享工具栏的更多菜单中自定按钮添加在“离开”按钮前。
  2. 删除自定义按钮。通过Config接口删除customButton中的按钮配置,关于清空自定义按钮操作,若赋值customButton:[],则清空全量自定义按钮;若customButton下未配置某位置下的自定义按钮,则清空该位置下的自定义按钮。
  3. 自定义按钮子菜单功能说明:
    • 当 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": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 1,
                            "subMenu":[
                             {
                                "id": "customSecondMenu",
                                "title": "二级菜单",
                                "buttonImg": "../../native/default/svg/icon-whiteboard.svg"
                             }
                             ]
    		    },
                        {
                            "id": "customMore",
                            "title": "自定义更多",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "id": "customShare",
                            "title": "自定义共享",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        }
                    ]
                }
            }
        }
    }

  • 删除部分自定义按钮
    customButton删除对应按钮,同时需要保留其他自定义按钮。以删除底部工具栏自定义按钮为例:
    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
    		        "id": "customMore",
    			"title": "自定义更多",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
    		    },
                        {
                            "id": "customShare",
                            "title": "自定义共享",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        }
                    ]
                }
            }
        }
    }

  • 清空某个位置下的自定义按钮

    customButton中删除该位置下的所有自定义按钮即可,若customButton下未配置某位置下的自定义按钮,则会清空该位置下的自定义按钮。以清空底部工具栏自定义按钮为例:

    {
        "frame":{
            "confMenu":{
                "toolBar":{
                    "customButton": [
                        {
                            "id": "customMore",
                            "title": "自定义更多",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 0
                        },
                        {
                            "id": "customShare",
                            "title": "自定义共享",
                            "buttonImg": "../../native/default/svg/icon-whiteboard.svg",
                            "buttonPos": 2
                        },
                    ]
                }
            }
        }
    }

  • 清空全量自定义按钮

customButton传入空数组,会清空所有位置下自定义按钮。清空示例如下:

{
    "frame":{
        "confMenu":{
            "toolBar":{
                "customButton": [
                ]
            }
        }
    }
}

分享:

    相关文档

    相关产品