微信小程序官方动态自定义底部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 相关文章推荐
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
Apr 01 Javascript
汉化英文版的Dreamweaver CS5并自动提示jquery
Nov 25 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
Dec 17 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
微信小程序开发之Tabbar实例详解
Jan 09 Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 Javascript
Angular2之二级路由详解
Aug 31 Javascript
Vue实现点击显示不同图片的效果
Aug 10 Javascript
vue项目中监听手机物理返回键的实现
Jan 18 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
如何让vue长列表快速加载
Mar 29 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中“简单工厂模式”实例代码讲解
2012/09/04 PHP
ThinkPHP之A方法实例讲解
2014/06/20 PHP
php使用glob函数遍历文件和目录详解
2016/09/23 PHP
利用laravel+ajax实现文件上传功能方法示例
2017/08/13 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
javascript读取xml
2006/11/04 Javascript
基础的prototype.js常用函数及其用法
2007/03/10 Javascript
JS获取浏览器版本及名称实现函数
2013/04/02 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
浅析javascript中的DOM
2015/03/01 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
2016/01/08 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
Vue组件通信中非父子组件传值知识点总结
2019/12/05 Javascript
Javascript中window.name属性详解
2020/11/19 Javascript
[01:28]一分钟告诉你DOTA2 TI9不朽宝藏Ⅱ中有什么!
2019/07/09 DOTA
python中使用urllib2获取http请求状态码的代码例子
2014/07/07 Python
Python中有趣在__call__函数
2015/06/21 Python
解决python中使用plot画图,图不显示的问题
2018/07/04 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python sklearn中的.fit与.predict的用法说明
2020/06/28 Python
倡议书范文
2014/04/16 职场文书
人力资源管理求职信
2014/08/07 职场文书
离婚协议书范本
2015/01/26 职场文书
爱岗敬业事迹材料
2019/06/20 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
编写python程序的90条建议
2021/04/14 Python
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
mybatis 获取更新记录的id
2022/05/20 Java/Android