更新记录

1.1.0（2020-05-08）

1. 菜单项的点击方法由改为onClick；（其实并没啥意义，就是顾名思义而已）
2. 新增：菜单项无url和无符合navigator、button的open-type时，视为点击按钮，组件內定义了一个press方法（line 227），页面调用组件时可使用 <component-name @press="methodName">；
3. 新增：组件prop height，设置菜单项宽度；
4. 新增：菜单项跳转、button的open-type、webview跳转等方式
5. 优化：菜单项title支持html；
6. 新增：菜单项设置图标颜色iconColor、标题颜色titleColor;
7. 有朋友说无法成功调用，现在在说明文档补充调用演示，如果不成功，请下载demo查看，或评论区反馈。
8. 删除：属性baseIconFont，当单项中当icon属性设置为字体图标class全称且设置iconfont:true时，使用字体图标作为单项图标。

1.0.3（2020-04-26）

为避免疏忽，将原本放在App.vue的$rpxToPxFactor调整到组件内部，并更名为rpxToPxFactor ，内部将会调用一次uni.getSystemInfo。

此次更新为修复上一个发布的错漏代码

1.0.2（2020-04-26）

为避免疏忽，将原本放在App.vue的$rpxToPxFactor调整到组件内部，并更名为rpxToPxFactor，内部将会调用一次uni.getSystemInfo。

平台兼容性

更新日志

2020-5-8：

1. 菜单项的点击方法由改为onClick；（其实并没啥意义，就是顾名思义而已）
2. 新增：菜单项无url和无符合navigator、button的open-type时，视为点击按钮，组件內定义了一个press方法（line 227），页面调用组件时可使用 <component-name @press="methodName">；
3. 新增：组件prop height，设置菜单项宽度；
4. 新增：菜单项跳转、button的open-type、webview跳转等方式
5. 优化：菜单项title支持html；
6. 新增：菜单项设置图标颜色iconColor、标题颜色titleColor;
7. 有朋友说无法成功调用，现在在说明文档补充调用演示，如果不成功，请下载demo查看，或评论区反馈。
8. 删除：属性baseIconFont，当单项中当icon属性设置为字体图标class全称且设置iconfont:true时，使用字体图标作为单项图标。

简介

宫格菜单导航，实现：

1. n行n列
2. 带指示条横行滚动
3. 图标自定义尺寸
4. 文本颜色设置
5. 灵活设置数据的key
6. 可做点击按钮，可做跳转导航
7. 菜单项可使用navigator和button的open-type

适用端

适用于js项目

依赖

因涉及到计算，依赖于numeral.js，直接安装：

npm i -S numeral

rpx和px的比例

这是一个保证准确的前置条件（其实APP平台是否准确没怎么测），按照小程序文档的指示：

已更新像素比例设置位置，查看顶部到更新日志。

注意：如果不设置，默认会直接取iphone,也就是0.5

属性

方法

press

当符合条件时，此事件生效，event上会携带该菜单项的所有字段，可在调用页面做一些点击菜单后当操作。

event： 携带菜单项所有字段

使用条件：

必要条件：没有url

必含一项：

1. 菜单项没有openType；
2. 菜单项有openType但不符合navigator和button的open-ype选项。

调用

<!-- 页面调用 -->
<ju-navigator-grid element-id="navigatorMenu" :list="menu" @press="onPress" height="180" size="90"/>

...
// 数据
data(){
    return {
        menu1:[
            {title: "带app内url", url: '/pages/field/index', icon: "/static/images/100x100.jpg"},
            {title: "带外部url", url: 'https://baidu.com'},
            {title: "普通按钮", type: 'custom'},
            {title: "open-type=share", openType: 'share', icon: ''},
            {title: "社区团购", icon: "/static/images/200x200-1.jpg"},
            {title: "pt=redirect", openType: 'redirectTo', url: '/pages/field/index'},
            {title: "秒杀", icon: ''},
            {title: "9.9包邮", icon: "/static/images/200x200-2.png"},
            {title: "零点秒杀", icon: ''},
            {title: "聚划算", icon: ''}
    ]
    }
},
methods:{
    // 对应没有openType和url时的点击事件
    onPress(e){
        console.log(e)
    }
}
...

list > item 可选属性

...
menu:[
    {
        title:'',           // 单项的标题，支持html，可设置简单的样式，注意宽高
        url:'',             //菜单项跳转，适合外部链接、app内链接
        icon:'',            //单项的图标，接受图片、字体图标
        iconfont:true,      //icon设置为字体图标时，需要标示为true
        openType:'',        //作为navigator时，对应<navigator>的open-type；作为button时，对应<button>的open-type；作为普通链接时，响应 @press 事件
        titleColor:'#555',  //单独设置标题颜色，覆盖组件属性 textColor
        iconColor:'#666',   //单独设置字体图标颜色，icon为图片则无效，覆盖组件属性 iconColor
    }
]
...

结尾

之前需要这方面的导航，就制作了一个小组件，当前可能还存在不少问题，写的不是很好，请多包涵，如有优化方案，欢迎指教，跪谢。

fixme：目前已知底部的指示滚动条在web端没有小程序端流畅。