随笔 - 2649  文章 - 2452  评论 - 0  阅读 - 80424

setupMenu 设置导航条的左右活动页选项

setupMenu ^7.10

设置导航条的左右活动页选项

#请求参数

Prop Type Default Comment
leftItems Array N/A 靠左边的icon设置
rightItems Array N/A 靠右边的icon设置

#leftItem | rightItem 字段描述

Prop Type Default Comment
width number N/A 菜单宽度,默认是44, 单位是pt
height number N/A 菜单高度,默认是44, 单位是pt
key string N/A 菜单标识,用于H5回调识别,点击icon的回调是通过event形式返回,key作为唯一标识
icon string N/A 菜单icon的在线url地址,优先级最高,如果有设置图片
desc string N/A 菜单描述,若没有配置icon则显示描述,低优先级
color string N/A 标题颜色,不传默认是黑色#000000
font number N/A 字体大小,不传默认是15

#接口调用示例

const params = {
    leftItems: [
      {
        width: 44, // 菜单宽度,默认是44
        height: 44, // 菜单高度,默认是44
        key: 'id1', // 菜单标识,用于H5回调识别
        icon: 'http://pic1.win4000.com/pic/d/d5/a5771055091.jpg', //菜单icon的在线url地址,优先级最高,如果有设置图片
        desc: '描述1', //菜单描述,若没有配置icon则显示描述,低优先级
        color: '#ff0000', //标题颜色,不传默认是黑色#000000
        font: 15, //字体大小,不传默认是15
      },
    ],
    rightItems: [
      {
        width: 44, // 菜单宽度,默认是44
        height: 44, // 菜单高度,默认是44
        key: 'id2', // 菜单标识,用于H5回调识别
        icon: 'http://pic1.win4000.com/pic/d/d5/a5771055091.jpg', //菜单icon的在线url地址,优先级最高,如果有设置图片
        desc: '描述1', //菜单描述,若没有配置icon则显示描述,低优先级
        color: 'red', //标题颜色,不传默认是黑色#000000
        font: 15, //字体大小,不传默认是15
      },
      {
        width: 44, // 菜单宽度,默认是44
        height: 44, // 菜单高度,默认是44
        key: 'id3', // 菜单标识,用于H5回调识别
        icon: 'http://pic1.win4000.com/pic/d/d5/a5771055091.jpg', //菜单icon的在线url地址,优先级最高,如果有设置图片
        desc: '描述1', //菜单描述,若没有配置icon则显示描述,低优先级
        color: 'yellow', //标题颜色,不传默认是黑色#000000
        font: 15, //字体大小,不传默认是15
      },
    ],
}
this.$bridge
  .setupMenu(params)
  .then(res => {
    this.$alert(res)
  })
  .catch(err => {
    this.$toast(err)
  })

#接口返回示例

// 点击相应菜单的回调统一走event事件回调
globalEvent("receiveMessageFromApp")
// 返回的数据为
{ 
  messageType: 'menuItemClick', //消息类型,H5通过这个类型判断是否获取数据
  messageBody: {"key":"id1"} //菜单的唯一标识
}
posted on   AtlasLapetos  阅读(2)  评论(0编辑  收藏  举报
编辑推荐:
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示