用法简介:

1.app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项

这里简单列举一些属性值:对于tabBar整体属性设置:

对于tabBar中每个Item属性设置:

简单的例子如下:

"tabBar": {
"selectedColor":"#8D503E",
"list": [
{
"pagePath": "pages/home_page/index",
"iconPath": "img/home.png",
"selectedIconPath": "img/home-s.png",
"text": "首页"
},
{
"pagePath": "pages/sign_up/index",
"iconPath": "img/task.png",
"selectedIconPath": "img/task-s.png",
"text": "选课报名"
},
{
"pagePath": "pages/party_subject/index",
"iconPath": "img/dj.png",
"selectedIconPath": "img/dj-s.png",
"text": "党建专题"
},
{
"pagePath": "pages/person/index",
"iconPath": "img/mine.png",
"selectedIconPath": "img/mine-s.png",
"text": "我的"
}
]
}

注意:

配置list的第一个一定是要是最先显示的,否则会出现底部导航看不到。

小程序之底部tabBar的更多相关文章

  1. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  2. 微信小程序-自定义底部导航

    代码地址如下:http://www.demodashi.com/demo/14258.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  3. 微信小程序之底部弹框预约插件

    代码地址如下:http://www.demodashi.com/demo/13982.html 一.前期准备工作: 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.c ...

  4. 小程序自定义底部tab

    首页wxml的代码: <view class="nav" hover-class="none"> <view class="inde ...

  5. 微信小程序设置底部导航栏目方法

    微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家. 好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了 ...

  6. 微信小程序开发过程中tabbar页面显示的相关问题及解决办法!

    在微信小程序的开发过程中如果有使用过tabbar的同学,我相信一定会遇到一些困扰.为什么有些时候代码中明明已经在app.json里面增加了tabbar,可以页面中就是不显示呢?可不可以有些页面显示ta ...

  7. 【小程序】小程序中设置 tabBar

    小程序中 tabBar 的设置,tabBar 就是底部导航栏,在app.json中配置. list 为数组至少两项.tab栏的 position 为 top 时间,不显示图标. "tabBa ...

  8. 微信小程序自定义底部导航栏组件+跳转

    微信小程序本来封装有底部导航栏,但对于想自定义样式和方法的开发者来说,这并不是很好. 参考链接:https://github.com/ljybill/miniprogram-utils/tree/ma ...

  9. 微信小程序 从含有tabbar的页面跳转到不含有tabbar的页面

    如何离开含有tabbar的页面 在微信小程序开发过程中,我们会碰到从某页跳转到一个含有tabbar的页面的需求, 用 wx.navigateTo({url: '...',})  不起作用,需要使用 w ...

随机推荐

  1. swipe js bug

    最近因为要写新的mobile site页面,有好几个页面上面必须用到photo slider. 使用插件: /* * Swipe 2.0 * * Brad Birdsall * Copyright 2 ...

  2. [FMX]将 Android 程序切换到后台及从后台切换到前台实现

    有时候,我们需要将自己的Android程序切换到后台运行,在必要时,将其切换到前台运行.下面提供了一种实现方式,首先需要引用三个单元:   1 uses Androidapi.JNI.App,Andr ...

  3. c++日志输出库 spdlog 简介(3)多线程控制台输出日志

    spdlog源码分析:https://www.cnblogs.com/eskylin/p/6483199.html spdlog的异步模式使得spdLog可以支持多线程,于是写了一个多线程的小例子: ...

  4. 设计模式--Singleton_(1)(C#版)

    今天我们来探索一下Singleton设计模式的实现及应用场景. Singleton模式属于Creational Type(创建型)设计模式的一种.该模式一般用于确保在应用中仅创建一个某类的instan ...

  5. Java中的split和join

    Javascript中的用于字符串和数组之间转换的split和join函数使用起来非常方便,在Java中也有这两个函数,只不过join是在apache commons的lang库里实现的. impor ...

  6. C++派生类与基类对象赋值情况

    一 .普通赋值 (同名隐藏) 子类对象调用和父类相同的函数名,该父类的函数名会被隐藏,只会调用子类的函数. Class A { public: void show(); void show(int); ...

  7. 629. K Inverse Pairs Array

    Given two integers n and k, find how many different arrays consist of numbers from 1 to n such that ...

  8. Windows 内核漏洞学习—空指针解引用

    原标题:Windows Kernel Exploitation – NullPointer Dereference 原文地址:https://osandamalith.com/2017/06/22/w ...

  9. D04——C语言基础学PYTHON

    C语言基础学习PYTHON——基础学习D04         20180810内容纲要: 1 内置函数 2 装饰器 3 生成器 4 迭代器 5 软件目录结构规范 6 小结 1 内置函数 内置函数方法详 ...

  10. php的GC机制

    在php5.3版本之前, php变量的回收机制只是简单的通过计数来处理(当refcount=0时,会回收内存),但这样会出现一个问题 $a=array("str"); $a[]=& ...