1.项目目录

2.在app.json里填写:tab个数范围2-5个

app.json

{
"pages": [
"pages/index/index",
"pages/audiobook/audiobook",
"pages/broadcast/broadcast",
"pages/group/group",
"pages/mine/mine"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"color": "#949494",
"selectedColor": "#42bd56",
"borderStyle": "black",
"list": [
{
"selectedIconPath": "assets/images/ic_tab_home_active.png",
"iconPath": "assets/images/ic_tab_home_normal.png",
"pagePath": "pages/index/index",
"text": "首页"
},
{
"selectedIconPath": "assets/images/ic_tab_subject_active.png",
"iconPath": "assets/images/ic_tab_subject_normal.png",
"pagePath": "pages/audiobook/audiobook",
"text": "书影音"
},
{
"selectedIconPath": "assets/images/ic_tab_status_active.png",
"iconPath": "assets/images/ic_tab_status_normal.png",
"pagePath": "pages/broadcast/broadcast",
"text": "广播"
},
{
"selectedIconPath": "assets/images/ic_tab_group_active.png",
"iconPath": "assets/images/ic_tab_group_normal.png",
"pagePath": "pages/group/group",
"text": "小组"
},
{
"selectedIconPath": "assets/images/ic_tab_profile_active.png",
"iconPath": "assets/images/ic_tab_profile_normal.png",
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
}
}

3.属性详解

4.效果图

微信小程序之 Tabbar(底部选项卡)的更多相关文章

  1. 图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作

    图解微信小程序---添加tabBar底部菜单,添加已做好轮播图操作 什么是tabBar? 顶部或者底部tab栏如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以 ...

  2. 微信小程序自定义tabbar的实现

    微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...

  3. 微信小程序自定义 tabbar

    一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...

  4. 微信小程序之tabbar切卡

    最近在研究小程序的时候,遇到了一个问题,就是tabbar切卡,在android上有fragment,在RN上也有提供一个第三方的组件来用,微信小程序,好像没有专门的一个组件来实现这个功能,度娘了大半天 ...

  5. 微信小程序关于tabbar点击切换数据不刷新问题

    微信小程序中经常遇到的需求就是我提交了一个表单或者进行了一个操作,需要在我的个人中心页面中实时显示出来,但是小程序中的tabbar切换类似于tab切换 并不会进行页面刷新请求 所以总是会造成一些数据更 ...

  6. 微信小程序 自定义tabbar实例

    在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...

  7. 微信小程序自定义TabBar

    项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...

  8. 【微信小程序】tabBar的显示问题

    tabBar不显示 在app.json中配置了4个页面,在tabBar的list中随意写了两个页面,编译后发现不能显示tabBar. { "pages": [ "page ...

  9. 微信小程序自定义tabbar的问题

    个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...

  10. 微信小程序之自定义底部弹出框动画

    最近做小程序时,会经常用到各种弹框.直接做显示和隐藏虽然也能达到效果,但是体验性太差,也比较简单粗暴.想要美美地玩,添加点动画还是非常有必要的.下面做一个底部上滑的弹框. wxml <view ...

随机推荐

  1. CentOS6 自己动手搭建开放NTP服务器

    第一步: 1. 安装NTP服务程序: [root@host ~]# rpm -qa | grep ntp #查询是否安装ntp服务程序 [root@host ~]# yum install -y nt ...

  2. Visual Studio 2017部署 webStrom开发的nodejs项目

    vs点击文件--新建--项目--JavaScript--Node.js--通过现有Node.js代码 wxxcx为nodejs项目根目录,然后右击整个项目--属性:1.启动目录2.默认打开的链接3.设 ...

  3. 小程序02 wxml和wxss

    微信小程序的排版就跟wxml和wxss有关,它们两者相当于HTML和CSS,其中wxml指定了界面的框架结构,而wxss指定了界面的框架及元素的显示样式. 一.wxml 界面结构wxmL比较容易理解, ...

  4. JavaEE-06 Servlet基础

    学习要点 Servlet生命周期 Servlet API的常用接口和类 Servlet的部署和配置 Servlet处理用户请求 Servlet JSP回顾 JSP技术开发web应用在服务器端生成网页的 ...

  5. MariaDB数据库(一)

    1.数据库简介 1.1 什么是数据库? 简单的说,数据库就是一个存放数据的仓库,这个仓库是按照一定的数据结构(数据结构是指数据的组织形式或数据之间的联系)来组织,存储的,我们可以通过数据库提供的多种方 ...

  6. 剑指Offer(书):替换空格

    题目:请实现一个函数,将一个字符串中的每个空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. 分析:通常来说,这样的题有两种方式 ...

  7. SpringMVC最核心

    如图所示:

  8. jquery获取ul中li的值

  9. Boolean.valueOf("true")的用法

    Boolean.valueOf(a);a为true时返回true不管大小写,a为其他值时都返回false:

  10. 学渣乱搞系列之扩展KMP的那点事

    扩展KMP牵涉了一些相对运动的姿势,比较费解!本学渣看了一天的扩展KMP,打算写点东西...本文看后,出现的后果本人一概不负责.毕竟我不是很会表达. 扩展KMP是搞什么灰机的?本学渣所知道的扩展KMP ...