微信小程序底部实现自定义动态Tabbar
多图警告!!!
最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里记录一下
微信小程序的Tab
想要写自定义Tab首先要知道原生Tab该怎么写,新建一个微信小程序运行起来,默认是这个样子的
简单修改一下小程序自带的logs页面,大概是这个样子(通过两个按钮模拟角色,就不写登录了)
目前想要在两个页面之前来回切换只能通过修改app.json中pages的顺序才能实现,所以我们需要底部的Tab,官方文档 中对Tab的使用有详细介绍,我这里选择在app.json
中添加tabBar
实现:
// app.json文件中pages同级的位置增加tabBar来配置底部Tab
"tabBar": {
// 文字默认颜色
"color": "#5F5F5F",
// 文字选中颜色
"selectedColor": "#027FF5",
// Tab背景颜色
"backgroundColor": "#F7F7F7",
// Tab列表
"list": [{
// Tab默认图标
"iconPath": "/images/footer-01.png",
// Tab选中图标
"selectedIconPath": "/images/footer-01-h.png",
// Tab跳转的目标路径,参考上面的pages属性即可
"pagePath": "pages/index/index",
// Tab底部显示的文字
"text": "首页"
}, {
"iconPath": "/images/footer-03.png",
"selectedIconPath": "/images/footer-03-h.png",
"pagePath": "pages/logs/logs",
"text": "测试页"
}]
},
这样一来就可以通过点击底部Tab来切换显示页面了,这就是微信小程序的Tab
自定义Tab
针对自定义Tab 官方文档 中也有详细说明,需要在根目录创建一个组件(Component),名称要固定写好:
然后在app.json
中找到之前添加的tabBar
属性,在他下面添加这样一个属性:
之后就会发现底部Tab已经变成了刚刚创建的组件,接下来就开始绘制Tab页
官方建议绘制Tab时最好使用cover-view + cover-image
标签搭配flex布局,保证Tab层级较高
这样一来自定义的Tab就已经成功了一半了,接下来就要结合JS让他称为真正的Tab,为了让自定义Tab使用起来更顺手,这里按照app.json
的tab格式将配置粘贴到JS文件中,然后修改下wxml让页面数据变成动态的,这样Tab列表的功能就完成了!
然后要实现Tab点击切换页面的核心功能,我们在每个Tab上添加一个点击事件,然后将需要跳转的目标路径传入到跳转方法中,然后页面跳转就实现了
接下来实现的是页面Tab高亮,之前在wxml中已经写了根据index判断的条件,接下来只需要在访问页面时记录tabIndex就没问题了
这样乍一看的确实现了高亮的效果,但是当仔细观察后就会发现,只有在第二次点击的时候高亮才会同步过去,Tab更新不及时,所以这里不能采取这种方法,应该让页面来决定那个Tab应该高亮,将switchTab中的setData移除掉,分别在首页和测试页添加更新高亮的代码:
OK!这样自定义Tab就可以正常使用了!
动态Tab实现
准备工作做的差不多了,现在开始实现动态Tab,鉴于在之前设置高亮的时候发现了Tab中数据更新不及时的问题,以及每个Page的onShow中都会调用重复代码,这里决定书写一个服务将Tab常用操作都封装进去,在utils文件夹下新建tab-service.js
,跟Tab相关的东西都放到这个下面:
// Tab页的data
let tabData = {
tabIndex: 0,
tabBar: {
custom: true,
color: "#5F5F5F",
selectedColor: "#027FF5",
backgroundColor: "#F7F7F7",
list: [{
iconPath: "/images/footer-01.png",
selectedIconPath: "/images/footer-01-h.png",
pagePath: "pages/index/index",
text: "首页"
}, {
iconPath: "/images/footer-03.png",
selectedIconPath: "/images/footer-03-h.png",
pagePath: "pages/logs/logs",
text: "测试页"
}]
}
}
// 更新角色
const updateRole = (that, role) => {
tabData.tabBar.list[0].text = role + "首页";
updateTab(that);
}
// 更新底部高亮
const updateIndex = (that, index) => {
tabData.tabIndex = index;
updateTab(that);
}
// 更新Tab状态
const updateTab = (that) => {
if (typeof that.getTabBar === 'function' && that.getTabBar()) {
that.getTabBar().setData(tabData);
}
}
// 将可调用的方法抛出让外面调用
module.exports = {
updateRole, updateTab, updateIndex
}
之前说了那么多,这里动态Tab细节就不多说了,点击下载代码 看看就懂了
微信小程序底部实现自定义动态Tabbar的更多相关文章
- 微信小程序开发之自定义菜单tabbar
做这个 遇到问题比较多,特此记录以便查看,直接上代码: 一.app.js 控制原有菜单隐藏.启用新菜单.菜单列表,集中在这里控制 hideTabBar这个很关键,解决苹果6S导致的双导航栏:原文htt ...
- 微信小程序底部导航栏(tabbar)
在app.json处设置“tabBar”,例子如下: { "pages": [ "pages/index/index", "pages/pages1/ ...
- 微信小程序页面调用自定义组件内的事件
微信小程序页面调用自定义组件内的事件 page page.json { "usingComponents": { "my-component": ". ...
- 微信小程序底部导航Tabbar
1,底部导航栏这个功能是非常常见的一个功能,基本上一个完成的app,都会存在一个导航栏,那么微信小程序的导航栏该怎么实现呢?经过无数的踩坑,终于实现了,好了,先看看效果图. 2,对于底部导航栏,小程序 ...
- 微信小程序底部导航栏部署
在微信小程序开发app.json(app.json它是定义全局页面) 只是用来部署微信底部的图标,最多不能大于五个 "tabBar":{ "selectedColor&q ...
- 微信小程序底部菜单栏的使用方法
1.找到项目根目录的配置文件 app.json,在配置文件中加入配置代码.例如: "tabBar": { <!--底部的导航配置属性--> "color&qu ...
- 微信小程序分享支持自定义封面图
微信小程序又发布更新了,刚好昨天支付宝也发布小程序,不能让它抢了风头的节奏.微信小程序主要更新如下:“小程序分享支持自定义封面图,公众号及小程序客服可发送小程序卡片.同时,我们还开放了获取发票抬头,指 ...
- 微信小程序 setData 如何修改动态数据?
最近这段时间在写微信小程序,有一个页面需要动态修改 data 中的数据,而这里似乎是个坑. 1.正常修改 正常修改很简单,当触发 change 事件时,数据和页面都会同时发生改变.这个也不用多说,很简 ...
- mpvue + 微信小程序 picker 实现自定义多级联动 超简洁
微信小程序官网只提供了省市区的三级联动,实际开发中更多的是自定义的多级联动: 依照微信小程序官网提供的自定义多级联动,需要使用到picker 的多列选择器,即设置 mode = multiSelect ...
随机推荐
- Java基础语法:运算符
Java 运算符(operator)根据功能分类: 算术运算符:+,-,*,/,%,++,-- 赋值运算符:= 关系运算符:>,<,>=,<=,==,!=,instanceof ...
- Ability之间或者进程间数据传递之对象(Sequenceable序列化)
鸿蒙入门指南,小白速来!0基础学习路线分享,高效学习方法,重点答疑解惑--->[课程入口] 这两天51cto上的一个粉丝朋友问了我一个问题,Ability之间使用Sequenceable序列化传 ...
- go mod包管理 加代理下载
原始go.mod文件 module xxx go 1.14 报错 i/o timeout go mod init workorder go mod init: go.mod already exist ...
- CentOS6.4 Install oh-my-zsh
先安装zsh yum -y install zsh # 查看是否安装完成 cat /etc/shells /bin/sh /bin/bash /sbin/nologin /bin/dash /bin/ ...
- Kubernetes - Kubelet TLS Bootstrapping
一.简单说明 写这个的初衷是自己搜索TLS Bootstrapping的时候没有搜到自己想要的东西,因为TLS Bootstrapping经过很多版本之后也发生了一些变化,所以网上很多也是老的内容了. ...
- Linux速通05 文件处理与编辑
使用 cat 命令进行文件的纵向合并 # 例:使用 cat 命令将 baby.age.baby.weight.baby.sex 这三个文件纵向合并为 baby文件 * cat baby.age bab ...
- Codeforces Round #683 (Div. 2, by Meet IT)
A 初始情况\(1\) ~ \(n\)堆分别有 \(1\) ~ \(n\) 个糖果,第\(i\)次操作给除了所选堆的糖果数 \(+ i\), 找到一种方案可以使得所有堆糖果数相同,输出操作次数和每次选 ...
- slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题
slickgrid ( nsunleo-slickgrid ) 3 修正区域选择不能跨冻结列的问题 上次解决区域选择不能跨冻结列问题的时候,剩了个尾巴,从右往左选择的时候,会出现选择不正常的情况,后 ...
- 为什么是InfluxDB | 写在《InfluxDB原理和实战》出版之际
1年前写的一篇旧文,文中的分析,以及探讨的问题和观点,至今仍有意义. 从2016年起,笔者在腾讯公司负责QQ后台的海量服务分布式组件的架构设计和研发工作,例如微服务开发框架SPP.名字路由CMLB.名 ...
- Spring Boot 自动配置 源码分析
Spring Boot 最大的特点(亮点)就是自动配置 AutoConfiguration 下面,先说一下 @EnableAutoConfiguration ,然后再看源代码,到底自动配置是怎么配置的 ...