[](https://github.com/MakerGYT/mini-menu/stargazers)
[](https://github.com/MakerGYT/mini-menu/network/members)
[](https://github.com/MakerGYT/mini-menu)
## 1 样例
[在开发者工具中预览效果](https://developers.weixin.qq.com/s/gCEq06mR7nia)=>代码片段ID:`gCEq06mR7nia`
## 2 安装使用
1. 获取组件
```sh
git clone https://github.com/MakerGYT/mini-menu.git
```
将项目中/components/navs-bong文件夹拷贝到组件路径下
2. 引入组件
在使用该组件的页面对应json文件中添加：
```json
{
"usingComponents": {
"menu":"/components/navs-bong/navs-bong"
}
}
```
3. 使用组件
参考[/pages](https://github.com/makergyt/mini-menu/tree/master/pages/index)
```html
<!-- index.wxml -->
<menu navs="{{navs}}" />
```
```js
Page({
data:{
navs: [{
name: '动态',
src: 'https://cdn.nlark.com/yuque/0/2019/png/280373/1568102197856-assets/web-upload/0a3840c5-1699-4507-b1d8-dfbbe0683fd0.png',
url: '../pages/other'
},
...
]
}
})
```
```css
/* index.wxss */
page {
--add-action:#39b54a; /*定义颜色*/
}
```
## 3 colorUI
结合[操作条cu-bar](https://github.com/weilanwl/ColorUI/tree/master/demo/pages/component/bar)使用
```html
<!-- index.wxml -->
<menu navs="{{navs}}" />
<view class="cu-bar foot tabbar bg-white">
<view class="action text-green">
<view class="cuIcon-homefill"></view> 首页
</view>
<view class="action text-gray">
<view class="cuIcon-similar"></view> 分类
</view>
<view class="action text-gray add-action">
<!-- 此处删去原有button-->
发布
</view>
<view class="action text-gray">
<view class="cuIcon-cart">
<view class="cu-tag badge">99</view>
</view>
购物车
</view>
<view class="action text-gray">
<view class="cuIcon-my">
<view class="cu-tag badge"></view>
</view>
我的
</view>
</view>
```
## 4 属性列表
| 属性 |类型| 默认值|必填|说明|
| -- | --|--|--|--|
| navs | Array | | 是 |导航菜单列表 {name,icon,url}|
## 5 ToDo
- [ ] 待修复:展开边界有像素点不顺畅
## License
[MIT](https://github.com/MakerGYT/mini-menu/blob/master/LICENSE) © MakerGYT
微信小程序：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询
版权申诉
5星 · 超过95%的资源 17 浏览量
2022-07-09
06:50:00
上传
评论
收藏 954KB ZIP 举报 
微信小程序：王者荣耀战力查询微信小程序源码下载支持安卓苹果微信QQ等多区查询 （235个子文件） 
【点击查最新更新】.bat 26B config 304B description 73B exclude 240B HEAD 188B HEAD 188B HEAD 32B HEAD 23B
readme.html 4KB readme.html 4KB pack-0ec69337a26e543b6985fb0f4ca36df89002dd30.idx 2KB index 2KB
官方技术论坛.jpg 51KB 关注官方小程序发现更多免费资源.jpg 31KB fhpic_2.jpg 30KB 关注公众号下载免费资源.jpg 27KB kbpic_2.jpg 27KB cfpic_2.jpg 26KB cfpic_1.jpg 25KB fhpic_1.jpg 23KB kbpic_1.jpg 20KB CCFB2473FA3C51DFAA9D4C74F098FAA7.js 81KB rename.js 10KB heroList.js 4KB index.js 4KB heroList.js 3KB heroList.js 3KB heroList.js 3KB index.js 3KB page-title.js 2KB index.js 2KB home.js 2KB A2FA18E6FA3C51DFC49C70E1E3A8FAA7.js 2KB input.js 2KB search.js 1KB g-page.js 1KB index.js 1KB button.js 990B top.js 905B other.js 892B cu-custom.js 878B introduce.js 837B index.js 795B wechat.js 793B page.js 683B link.js 668B navs-bong.js 634B navs-bong.js 634B tag-swiper.js 541B app.js 501B tips.js 445B loadModal.js 393B 91F917D4FA3C51DFF79F7FD3ACA8FAA7.js 343B 020A7106FA3C51DF646C19014078FAA7.js 333B android_h.js 272B p_apple.js 272B loading.js 263B log.js 209B F04804E7FA3C51DF962E6CE07288FAA7.js 155B cell-list.js 153B follow.js 145B header.js 65B tip.js 65B app.js 9B project.config.json 2KB app.json 1KB project.config.json 1KB project.private.config.json 327B rename.json 316B app.json 298B tag-swiper.json 293B wechat.json 293B follow.json 293B cell-list.json 293B page-title.json 293B g-page.json 293B header.json 293B loading.json 293B input.json 293B search.json 293B top.json 293B page.json 293B button.json 293B loadModal.json 293B tips.json 237B heroList.json 228B sitemap.json 197B sitemap.json 191B index.json 144B heroList.json 132B heroList.json 132B heroList.json 128B home.json 98B android_h.json 81B p_apple.json 81B link.json 78B log.json 75B cu-custom.json 52B tip.json 52B index.json 52B共 235 条
- 1
- 2
- 3
- 1
- 2
前往页