微信小程序官方动态自定义底部tabBar的例子


Posted in Javascript onSeptember 04, 2019

最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的。在网上搜集了海量资料后发现无非两种解决方法:1.是建立模板,可是会有不能忍受的抖动;2.是利用小程序的组件开发;但是项目已经进行了一般,不可能再进行大的改变;

怎么办呢??

无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接、

先看效果图:

微信小程序官方动态自定义底部tabBar的例子

1.首先看一下官方用法

这是几个非常重要你需要知道的

2.小程序提供了一个例子

在这个例子中有一个微信官方提供的组件:下载地址

组件的目录结构:

微信小程序官方动态自定义底部tabBar的例子

3.就是我们要根据需求改造

自己改造的目录结构如下:

微信小程序官方动态自定义底部tabBar的例子

1.首先配置app.json

"tabBar": {
 "custom": true,//这个要有, 前面都提到过,注释要删了
 "color": "#7A7E83",
 "selectedColor": "#3cc51f",
 "borderStyle": "black",
 "backgroundColor": "#ffffff",
 "list": [
  {
   "pagePath": "pages/index1/index1",
   "iconPath": "/image/home.png",
   "selectedIconPath": "/image/home1.png",
   "text": "首页1"
  },
  {
   "pagePath": "pages/mine1/mine1",
   "iconPath": "/image/user.png",
   "selectedIconPath": "/image/user1.png",
   "text": "我的1"
  },
  {
   "pagePath": "pages/index2/index2",
   "iconPath": "/image/home.png",
   "selectedIconPath": "/image/home1.png",
   "text": "首页2"
  },
  {
   "pagePath": "pages/mine2/mine2",
   "iconPath": "/image/user.png",
   "selectedIconPath": "/image/user1.png",
   "text": "我的2"
  }
 ]
},//这个
"usingComponents": {}

2.app.js

//app.js
App({
 onLaunch: function () {
 },
 globalData: {
  userInfo: null,
  list:[] //存放tabBar的数据
 }
})

3.改造组件

custom-tab-bar/index.js

const app =getApp();
Component({
 data: {
  selected: 0,
  color: "#7A7E83",
  selectedColor: "#ff6700",
  list: [] //tabBar的数据
 },
 lifetimes: {
  //组件的生命周期函数
  attached() {
   this.setData({
    list: app.globalData.list
   })
  },
 },
 methods: {
  switchTab(e) {
   const data = e.currentTarget.dataset
   const url = data.path
   wx.switchTab({url})
   this.setData({
    selected: data.index
   })
  }
 }
})

4.下面就是用了

在首页index.wxml定义了两个按钮

<button bindtap='tab1'>进入tab1</button>
<button bindtap='tab2'>进入tab2</button>

时间:index.js

tab1: function() {
  app.globalData.list = [{
    "pagePath": "/pages/index1/index1",
    "iconPath": "/image/home.png",
    "selectedIconPath": "/image/home1.png",
    "text": "首页1"
   },
   {
    "pagePath": "/pages/mine1/mine1",
    "iconPath": "/image/user.png",
    "selectedIconPath": "/image/user1.png",
    "text": "我的1"
   }
  ]
  wx.switchTab({
   url: '../index1/index1',
  })
 },
 tab2: function() {
  app.globalData.list = [{
    "pagePath": "/pages/index2/index2",
    "iconPath": "/image/home.png",
    "selectedIconPath": "/image/home1.png",
    "text": "首页2"
   },
   {
    "pagePath": "/pages/mine2/mine2",
    "iconPath": "/image/user.png",
    "selectedIconPath": "/image/user1.png",
    "text": "我的2"
   }
  ]
  wx.switchTab({
   url: '../index2/index2',
  })
 }

5.在每个tabBar中的onshow()方法中添加如下:

//添加选中效果
if (typeof this.getTabBar === 'function' &&
   this.getTabBar()) {
   this.getTabBar().setData({
    selected: 0 //这个数是,tabBar从左到右的下标,从0开始
   })
  }

另外调整基础库版本的地方在

微信小程序官方动态自定义底部tabBar的例子

源代码下载地址

总结

以上所述是小编给大家介绍的微信小程序官方动态自定义底部tabBar的例子,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
HTML长文本截取含有HTML代码同样适用的两种方法
Jul 31 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
javascript显示中文日期的方法
Jun 18 Javascript
动态加载JavaScript文件的两种方法
Apr 22 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
Mar 13 Javascript
详解如何提高 webpack 构建 Vue 项目的速度
Jul 03 Javascript
微信小程序实现顶部普通选项卡效果(非swiper)
Jun 19 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 #Javascript
layui 表单标签的校验方法
Sep 04 #Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 #Javascript
对layer弹出框中icon数字参数的说明介绍
Sep 04 #Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 #Javascript
使用Angular material主题定义自己的组件库的配色体系
Sep 04 #Javascript
vue-loader中引入模板预处理器的实现
Sep 04 #Javascript
You might like
Linux下将excel数据导入到mssql数据库中的方法
2010/02/08 PHP
php数组合并array_merge()函数使用注意事项
2014/06/19 PHP
PHP多线程之内部多线程实例分析
2015/03/09 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
出现“不能执行已释放的Script代码”错误的原因及解决办法
2007/08/29 Javascript
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
javascript数组的扩展实现代码集合
2008/06/01 Javascript
JQuery 风格的HTML文本转义
2009/07/01 Javascript
jquery 最简单的属性菜单
2009/10/08 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
详解jQuery中基本的动画方法
2016/12/14 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
一些可能会用到的Node.js面试题
2019/06/15 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
js实现星星海特效的示例
2020/09/28 Javascript
如何利用vue实现波谱拟合详解
2020/11/05 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
简单谈谈Python中的反转字符串问题
2016/10/24 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
深入学习Python中的上下文管理器与else块
2017/08/27 Python
python实现身份证实名认证的方法实例
2019/11/08 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
三八妇女节演讲稿
2014/05/27 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
雷锋的观后感
2015/06/10 职场文书
庆祝教师节主持词
2015/07/06 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
小学大队干部竞选稿
2015/11/20 职场文书