首页 > 【微信小程序】之如何创建底部菜单？tabBar、mp-tabbar

【微信小程序】之如何创建底部菜单？tabBar、mp-tabbar

方法一：通过app.json配置底部菜单（常用）

 小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象全局配置 | 微信开放文档微信开发者平台文档https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

  "tabBar": {"color": "#7A7E83","selectedColor": "#3cc51f","borderStyle": "black","backgroundColor": "#F7F7F7","list": [{"pagePath": "pages/home/home","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "首页"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "内页1"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "内页2"},{"pagePath": "pages/neiye/neiye","iconPath": "image/icon_component.png","selectedIconPath": "image/icon_component_HL.png","text": "我的"}]},

方法二：通过小程序扩展组件mp-tabbar创建底部菜单

app.json根节点加入

 "useExtendedLib": {"weui": true},

 需要使用组件的页面json文件里面加入

  "usingComponents": {"mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar"}

  需要使用组件的页面html文件里面加入

  需要使用组件的页面js文件里面加入 

  data: {list: [{text: '栏目1',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",badge: '8'},{text: '栏目2',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",badge: 'new'},{text: '栏目3',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",dot: true},{text: '栏目4',"iconPath": "/image/icon_component.png","selectedIconPath": "/image/icon_component_HL.png",}]},tabChange(e:any) {console.log('tab change', e)},

更多相关：

  • 在ubuntu 16.04.5 LTS上使用Python 2.7生成带logo的二维码实战

    安装依赖库 详细的使用python模块qrcode库的博文，参见 https://blog.csdn.net/tao_627/article/details/85053884 下面的例子需要使用qrcode，pillow，matplotlib和python-tk库，安装如下 sudo pip install qrcode su...

  • 运行ORB-SLAM笔记_使用篇（二）

    #include                        #include #include #include    ...

  • Python调整图像亮度和饱和度

    # 调整图像亮度input_image = cv2.cvtColor(input_image , cv2.COLOR_BGR2HSV)input_image [:, :, 2] = scale_value * input_image [:, :, 2]input_image [:, :, 2][input_image [:, :, 2...

  • Halcon学习之六：获取Image图像中Region区域的特征参数

    area_center_gray ( Regions, Image : : : Area, Row, Column )    计算Image图像中Region区域的面积Area和重心（Row，Column）。 cooc_feature_image ( Regions, Image : : LdGray, Direction : En...

  • 常用图像额文件格式及类型

    1、显示一幅二值图像： >> bw = zeros(90,90); >> bw(2:2:88,2:2:88) = 1; >> imshow(bw); >> 2、利用image函数显示一幅索引图像：   >> [X,MAP] = imread('E:STUDY_softwareMatlab2016images11.jp...

  • iOS 相册和网络图片的存取

    iOS 相册和网络图片的存取 保存 UIImage 到相册 UIKit UIKit 中一个古老的方法，Objective-C 的形式 void UIImageWriteToSavedPhotosAlbum(UIImage *image, id completionTarget, SEL completionSelector, void...

©2024 11GX.COM