小程序自定义tabBar（类似咸鱼）

在App上做类似咸鱼的Tabbar时，只能用自定义的方法，考虑小程序中如果想自定义像咸鱼这样的Tabbar，该如何实现呢？网上搜索的大多资料的tabbar都会在页面切换的时候重新渲染，下面的方法页面跳转时不会闪。

效果图

下载地址：https://github.com/dt8888/tabbar

具体实现方法：
1.分装一个tabbar的组件属性列表实现项目的Tabbar的个数，文字，颜色，图片大小最好用官网推荐的81px*81px的icon。

JS关键代码为：

properties: {tabbar: {type: Object,value: {"backgroundColor": "#ffffff","color": "#979795","selectedColor": "#1c1c1b","list": [{"pagePath": "pages/index/index","iconPath": "icon/icon_home.png","selectedIconPath": "icon/icon_home_HL.png","text": "首页"},{"pagePath": "pages/middle/middle","iconPath": "icon/icon_release.png","isSpecial": true,"text": "发布"},{"pagePath": "pages/mine/mine","iconPath": "icon/icon_mine.png","selectedIconPath": "icon/icon_mine_HL.png","text": "我的"}]}}},

2.在App.js中的onLaunch方法中 用wx.hideTabBar();隐藏系统自带的tabbar，点击时作为按钮选中的判断方法为：

editTabbar: function () {let tabbar = this.globalData.tabBar;let currentPages = getCurrentPages();let _this = currentPages[currentPages.length - 1];let pagePath = _this.route;if(pagePath.indexOf('/') != 0){pagePath = '/' + pagePath;} for (let i in tabbar.list) {tabbar.list[i].selected = false;(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);}_this.setData({tabbar: tabbar});},

如何引用该项目实现自己的自定义Tabbar：

1.找到项目中的tabbarComponent目录，放到自己的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片，文字颜色根据需求做适当的更改。
2.app.json中配置tabBar，因为点击发布时做的页面跳转，不配置在tabBar的list中。
3.在app.js中的globalData中加入自定义tabbar的参数，再加入一个方法给tabBar.list配置中的页面使用。
4.在页面的JS中的data中加入tabbar:{}，并在onload方法中调用app.editTabbar();
5.页面的.json文件中加入代码

"usingComponents": {
"tabbar": "../../tabbarComponent/tabbar"
}

6.在页面的.wxml文件中加入<tabbar tabbar="{{tabbar}}"></tabbar>

小程序自定义tabBar（类似咸鱼）相关推荐

微信自定义tabbar有小红点_微信小程序自定义 tabbar
一定的需求情况下,无法使用小程序原生的 tabbar 的时候,需要自行实现一个和 tabbar 功能一模一样的自制组件. 查阅了海量的博客和文档之后,亲自踩坑.总结了三种在不使用微信小程序原生 tab ...
小程序自定义tabbar custom-tab-bar 6s出不来解决方案，cover-view不兼容
小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容参考文章: (1)小程序自定义tabbar custom-tab-bar 6s出不来解决方案,c ...
微信小程序自定义输入仿咸鱼发布
微信小程序自定义输入仿咸鱼发布效果图效果图2 主要代码 .js // pages/user/release/release.js import Toast from 'vant-weapp/toa ...
小程序自定义tabbar,子页面也显示tabbar
小程序自定义tabbar,子页面也显示tabbar 我找了很多很多的文件,大都是显示一级页面的tabbar的,子页面显示tabbar几乎没有,我自己整理了一下.如果有不对的地方,希望评论指出,我会进一 ...
微信小程序自定义tab-bar遇到的问题及解决方案
微信小程序自定义tab-bar遇到的问题及解决方案小程序自定义tab-bar 问题一:需要点击两次才能变成选中装填解决方案: 问题二:真机查看的时候,切换页面的时候会从上到下解决方案: 小程序自 ...
微信小程序自定义tabbar【中间凸起样式】
微信小程序自定义tabBar样式,选中后中间凸起效果预览微信开发文档:自定义tabBar 一.配置信息在 app.json 中的 tabBar 中指定 custom 字段为 true[允许使用自 ...
小程序自定义tabbar + 自定义tabbar样式 + tabbar切换激活样式问题
我用的是 Vant Weapp UI组件库, 需要用store 全局共享数据解决tabbar切换激活样式问题关于如何使用 Mobx,创建store可参考:微信小程序 Mobx实现数据共享(创建s ...
uni-app自定义tabBar；uni-app小程序自定义tabBar；uni-app小程序修改中间tabBar导航栏大小；uni-app中间导航栏凸起；uni-app修改底部导航栏
需求:要求小程序,中间的tabBar自定义凸起或者图标变大: 问题:查看uni-app的tabBar文档可知,小程序是不支持midButton的: 解决思路:隐藏uni-app原有的tabBar,然后 ...
小程序自定义tabbar，不同用户显示不同页面
前言当我们拿到一个小程序项目,官方tabbar足够我们使用,但跟着业务有所增加,我们前端也不得不跟着改变.因为业务需求,我这个小程序分成了用户端和管理端两端,相对应使用权限也不同,因此tabbar所 ...
微信小程序自定义tabBar（实操）
文章目录一.前言二.固定效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json代码三.自定义效果图实现步骤实现步骤完整代码-矢量图 images图片 app.json ...

小程序自定义tabBar（类似咸鱼）

小程序自定义tabBar（类似咸鱼）相关推荐

最新文章

热门文章