微信小程序官方动态自定义底部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 相关文章推荐
javascript操作excel生成报表示例
May 08 Javascript
jquery中filter方法用法实例分析
Feb 06 Javascript
JS组件Bootstrap Table表格多行拖拽效果实现代码
Dec 08 Javascript
Bootstrap中文本框的宽度变窄并且加入一副验证码图片的实现方法
Jun 23 Javascript
前端框架Vue.js中Directive知识详解
Sep 12 Javascript
再谈javascript注入 黑客必备!
Sep 14 Javascript
jQuery通过ajax快速批量提交表单数据
Oct 25 Javascript
jQuery实现用户输入自动完成功能
Feb 13 Javascript
JavaScript登录验证基础教程
Nov 01 Javascript
详解如何快速配置webpack多入口脚手架
Dec 28 Javascript
vue-cli4使用全局less文件中的变量配置操作
Oct 21 Javascript
vue项目中的支付功能实现(微信支付和支付宝支付)
Feb 18 Vue.js
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
php ftp文件上传函数(基础版)
2010/06/03 PHP
php curl获取网页内容(IPV6下超时)的解决办法
2013/07/16 PHP
php打印输出棋盘的实现方法
2014/12/23 PHP
php实现转换ubb代码的方法
2015/06/18 PHP
Javascript 陷阱 window全局对象
2008/11/26 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
jQuery简单动画变换效果实例分析
2016/07/04 Javascript
浅谈js中对象的使用
2016/08/11 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
2017/12/25 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
小程序实现多选框功能
2018/10/30 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
JS实现滑动插件
2020/01/15 Javascript
[03:09]DOTA2亚洲邀请赛 LGD战队出场宣传片
2015/02/07 DOTA
[03:24]CDEC.Y赛前采访 努力备战2016国际邀请赛中国区预选赛
2016/06/25 DOTA
编写Python脚本使得web页面上的代码高亮显示
2015/04/24 Python
实例解析Python的Twisted框架中Deferred对象的用法
2016/05/25 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
美国女鞋品牌:naturalizer(娜然)
2016/08/01 全球购物
购买限量版收藏品、珠宝和礼品:Bradford Exchange
2016/09/23 全球购物
捷克原创男装和女装购物网站:Bolf.cz
2018/04/28 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
怎样创建、运行java程序
2014/08/01 面试题
python+selenium小米商城红米K40手机自动抢购的示例代码
2021/03/24 Python
大学生村官座谈会发言材料
2014/05/25 职场文书
学校世界艾滋病日宣传活动总结
2015/05/05 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
Python数据可视化之Seaborn的安装及使用
2022/04/19 Python