小程序自定义tabbar
代码片段: wechatide://minicode/IUoCyemJ7D3d
GitHub: https://github.com/WozHuang/Miniprogram-Demo/tree/master/custom-tabbar
在项目中要求用tabbar,奈何老板嫌微信自带的tabbar太丑而且功能也不够丰富,因此需要自定义tabbar,没办法就只能自己重新造一个,在造轮子之前从网上找了不少但都是直接使用navigateTo或者redirectTo实现跳转功能,每次都重新加载一下页面实在是受不了。
在细读了微信的api文档后发现能够使用hideTabBar这个方法将原有的tabbar隐藏掉,这样只要自己重新写一个tabbar就可以了
实现原理
利用
wx.hideTabBar({aniamtion: false})
隐藏默认的tabbar点击时使用
wx.switchTab
进行跳转
优点:
自定义更好看的tabbar
相比其他用navigateTO实现的tabbar效果更好(没有页面跳转)
可以自定义页面跳转方式,比如第三个按钮的目标页面是一个二级页面,不需要tabbar
缺点:
- 相比于原生的tabbar,首次进入页面的时候需要加载tabbar,导致初次切换到页面的时候tabbar会闪烁一下,视觉效果差点
注:可以考虑在单页面中引入多个页面来避免闪烁的问题,但是这样开发的复杂度会高不少
效果图:
2019-1-21 更新
小程序有时ios下tabbar没有隐藏,为了保险起见在组件的生命周期内调用了多次 wx.hideTabBar
2019/1/22 更新
发现在ios下,在小程序全屏播放视频后回到页面内时tabbar会再次出现,因此如果有全屏播放视频的需求的话需要在视频对象的 bindfullscreenchange
事件中再次调用 wx.hideTabBar({aniamtion: false})
(我不管,反正这是微信ios端的锅,不是我的代码有问题 ヽ(o`皿′o)ノ )
2019/4/4 更新
看文档时发现小程序官方在2.5.0出了一个自定义tabbar的功能,但是对版本库有要求,在低版本基础库下会降级成原生的tabbar样式(总觉得跟我自己写的也差不多,不过官方支持就更好了。。。)
小程序自定义tabbar的更多相关文章
- 微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
- 微信小程序自定义tabbar的实现
微信小程序自定义tabbar的实现 目的:当采用微信的自定义tabbar组件的时候,切换的时候会出现闪屏的效果:当使用微信默认的tabbar的时候,限制了tabbar的数量以及灵活配置. 方案:自己动 ...
- 小程序自定义tabBar,动态控制tabBar
最近做项目的时候,突然来了个小特殊的需求,根据客户的类型来动态显示底部的tabBar菜单.当时我就有点小懵逼了,这个不是小程序自带的组件么?还要做成动态?这就有点尴尬了..... 不过也只是一时尴尬而 ...
- 微信小程序自定义tabbar的问题
个人感觉小程序的tab样式自定义的能力有所欠缺,不够美观,于是今天自己diy了一个tab 测试的时候发现,无论是使用navigator跳转(会出现点击的效果)还是用bindtap(触摸),因为没有定义 ...
- 微信小程序 自定义tabbar实例
在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 t ...
- 微信小程序自定义TabBar
项目中需要根据用户角色控制TabBar中各Item的显示和隐藏,然而小程序自带TabBar没有提供隐藏某个item的功能,只好自己动手写了一个. 1.wxml文件 <view class=&qu ...
- 小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容
1.从微信小程序的官网扣下来的demo,实际测试中,发现6s ios10 系统不兼容,里面的内容出不来 <cover-view class="tab-bar"> < ...
- 微信小程序 - 自定义tabbar
更新: 2019-1-18:自定义tabbar组件已发布 各种奇葩的需求,造就了我们 wxml <view class="nav-tabs"> <view cla ...
- 微信小程序 - 自定义tabbar(组件)
配置项(关于使用组件) index.wxml <!-- tabBar:tabBar配置 activeIndex: 激活页面下标 slots: 多插槽配置(需与页面一致) --> <t ...
随机推荐
- Book 树状数组 小结
差不多花了10天学树状数组,是照着这篇博客做的题目,还差几道---------- http://blog.csdn.net/chenguolinblog/article/details/9916229 ...
- ZBrush软件特性之Layers
ZBrush®中的Layers层调控板可以在单个文档工作中添加多个层,实际上是把新建的层作为一个分离的文档,层之间可以相互影响. 使用层工作 Layers调控板为每个层都有预置存放的空间,刚启动ZBr ...
- 粘包解决高端_Server
from socket import * #导入套接字模块的所有命令import subprocess #导入subprocess模块,用于执行命令行import struct #导入struck模块 ...
- pytorch 6 batch_train 批训练
import torch import torch.utils.data as Data torch.manual_seed(1) # reproducible # BATCH_SIZE = 5 BA ...
- Shiro:授权的相关实现
Shiro:授权的相关实现 一.使用Shiro过滤器实现授权 设置好授权拦截跳转的请求地址 /** * 创建ShiroFilterFactoryBean */ @Bean public ShiroFi ...
- 2015 Multi-University Training Contest 4 hdu 5334 Virtual Participation
Virtual Participation Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Ot ...
- angular-事件
ng-click事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 <div ng-app="myApp ...
- 关于android的设备管理器-DevicePolicyManager(一)
在Andorid的设置->安全里面有个设备管理器的选项,相信大部分android用户都不太会去注意这个东西.近期在安装了一个应用之后发现这个里面的东西变了.怎么回事呢,研究研究看看.</s ...
- ZOJ 3687
赤裸的带禁区的排列数,不过,难点在于如何用程序来写这个公式了.纠结了好久没想到,看了看别人的博客,用了DFS,实在妙极,比自己最初想用枚举的笨方法高明许多啊.\ http://blog.csdn.ne ...
- ioctl.h 分析
ioctl.h 分析 我自己画了个解析图...不要嫌弃丑啊.. . 哈哈 type The magic number. Just choose one number (after consulting ...