【微信小程序】之如何创建底部菜单？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文件里面加入

<mp-tabbar style="position:fixed;width:100%;bottom:0;" list="{{list}}" bindchange="tabChange"></mp-tabbar>

需要使用组件的页面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)},

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

微信小程序入门二：底部导航tabBar
小程序底部导航栏组件tabBar,可以参考下官方的API:tabBar 先看代码 //app.json {"pages":["pages/index/index" ...
微信小程序-封装原生垂直滚动菜单（类似外卖商品菜单）
效果展示: 就是根据左侧菜单点击,切换右侧显示的内容,可以上下滚动 colorUI组件库--垂直导航栏这种是通过原生的微信小程序制作的垂直导航栏,如果想要更好看的样式和效果,这里推荐一款小程序UI组 ...
微信小程序四（设置底部导航）
好了小程序的头部标题设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步 ...
小程序tabbar能放分包路径吗_微信小程序之如何自定义底部tabbar导航
我之前写一个微信小程序,保单万事通,有一个这样的功能 image.png 这个底部导航,如果用小程序自带的tabbar,根本无法实现,所有我想第2种方法来实现微信小程序文档中,有一种这个方法,但是我 ...
一、微信小程序-快速回顾(创建项目、项目结构分析)
文章目录一. 创建微信小程序项目 1.1. 准备工作 1.2. 创建微信小程序项目二.项目结构分析 2.1. 其他文件 2.2. 全局文件 2.3. 页面文件前言:软件开发需要学习的东西真的是太 ...
微信小程序五（创建轮播图）
应用中最常见的就是轮播图了,今儿个就讲讲微信小程序中轮播图的使用轮播图,不外乎俩个要素,跳转链接和图片地址 1. 设置数据我在 pages/test/test.js中添加如下数据 //test ...
微信小程序开发从创建到使用
一.注册微信小程序网址下载微信小程序开发工具 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html注册一个 ...
一、零基础入门微信小程序开发之创建项目工程同时完成引导页开发
前言创建这个系列博客的原因是因为最近在加深微信小程序的学习,按照我之前的学习习惯是不喜欢记录的,加上自己有拖延症就更不太愿意做这件事情了,同时我要给学生上课,但总是缺少教材所以就开了这个系列的博客, ...
微信小程序可横向滑动展开菜单
微信开发者工具通过scroll-view组件实现微信小程序的横向菜单可滑动的菜单,并在尾端插入一个图片,通过绑定事件实现点击之后更改view标签属性达到一个展开效果. 通过三元运算符控制组件的css ...
微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar
在一个微信小程序中想要用到两种不同的tabbar样式,可以使用微信小程序自带插件tabbar 首先在页面json文件中引入 tabbar {"navigationBarTitleText&q ...

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

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

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

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

最新文章

热门文章