微信小程序开发之自定义tabBar的实现
最近开发微信小程序，公司要求做一个类似闲鱼的tabbar，但是网上大多资料的tabbar都会在页面切换的时候重新渲染，所以我写了一个不会重新渲染的tabbar，有需要的直接拿走不谢。https://github.com/SuRuiGit/wxapp-customTabbar
在小程序的开发文档中，对tabbar是这样说明的：
如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
Tip：
1.当设置 position 为 top 时，将不会显示 icon
2.tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
在实际开发过程中，小程序自带的tabbar样式并不能满足设计提供的开发需求，所以需要我们自定义一套属于自己的tabbar。
使用步骤如下：
第一步：找到项目中的tabbarComponent目录，拷贝到你的工程中，然后将tabbarComponent->icon图标替换成你自己的tabbar图片
第二步：到app.json中配置tabBar，这里我就不细说了，只强调闲鱼的tabbar中间的按钮是跳到二级页面，所以不配置在tabBar的list中
第三步：在app.js的onLaunch方法中调用wx.hideTabBar();隐藏系统自带的tabBar
第四步：在app.js中的globalData中加入自定义tabbar的参数，再加入一个方法给tabBar.list配置中的页面使用，代码如下
globalData: {
userInfo: null,
tabBar: {
"backgroundColor": "#ffffff",
"color": "#979795",
"selectedColor": "#1c1c1b",
"list": [
{
"pagePath": "/page/index/index",
"iconPath": "icon/icon_home.png",
"selectedIconPath": "icon/icon_home_HL.png",
"text": "首页"
},
{
"pagePath": "/page/myRelease/index",
"iconPath": "icon/icon_release.png",
"isSpecial": true,
"text": "发布"
},
{
"pagePath": "/page/mine/index",
"iconPath": "icon/icon_mine.png",
"selectedIconPath": "icon/icon_mine_HL.png",
"text": "我的"
}
]
}
}
editTabbar: function() {
let tabbar = this.globalData.tabBar;
let currentPages = getCurrentPages();
let _this = currentPages[currentPages.length - 1];
let pagePath = _this.route;
(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的list中配置的页面的.js文件的data中加入tabbar:{}，并在onload方法中调用app.editTabbar();
第六步：在tabBar的list中配置的页面的.json文件中加入
"usingComponents": {
"tabbar": "../../tabbarComponent/tabbar"
}
在.wxml文件中加入<tabbar tabbar="{{tabbar}}"></tabbar>
到目前为止，自定义tabbar就完成啦，撒花！！！！！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章介绍了js使弹层下面body禁止滚动的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了javascript 产生随机数的几种方法总结的相关资料,希望通过本文大家能够掌握如何实现这样的方法，需要的朋友可以参考下2017-09-09
这篇文章主要介绍了使用js实现一个简单的滚动条过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了JavaScript缓冲运动实现方法,简单分析了JavaScript缓冲运动的实现原理与相关运算技巧,并给出了两则实例代码予以总结分析,需要的朋友可以参考下2016-01-01
jQuery ajax(复习)—Baidu ajax request分离版
你没有看错标题，本文的确是在讲Baidu ajax，不过是很久很久以前的版本了,我们先分析一段简单的ajax代码，来自早期的百度七巧板项目通过这个来先复习一遍ajax的知识2013-01-01
这篇文章主要为大家详细介绍了JavaScript中预编译的原理与流程的相关知识,文中的示例代码讲解详细,对我们深入了解JavaScript有一定的帮助,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要给大家介绍了关于uniapp安卓本地写入读取文件的相关资料,在uniapp中可以使用uni-app提供的API实现本地文件读取和写入,需要的朋友可以参考下2023-11-11
这篇文章主要为大家详细介绍了微信小程序如何获取手机验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
这篇文章主要为大家详细介绍了微信小程序下拉框组件使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
方便我们控制js的停止往下执行2008-07-07
最新评论