自定义微信小程序TabBar

自定义封装微信小程序`tabBar`

先创建文件夹
- 图标：images文件夹下的icon
- 先删除原来pages文件夹下的页面
- 在重新在pages文件夹下新建四个页面，分别是：
  - chat：消息
  - doc：文档
  - home：首页
  - profile：我的
- 新建一个自定义组件来渲染tabBar
  - 根目录下，文件名必须是custom-tab-bar（不能是components）
目录结构：

在app.json配置（"custom": true,为自定义组件的意思。usingComponents使用组件的意思，注册自定义组件。同时其余 tabBar 相关配置也补充完整）

{"pages":["pages/home/index","pages/doc/index","pages/chat/index","pages/profile/index"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor": "#fff","navigationBarTitleText": "Weixin","navigationBarTextStyle":"black"},"tabBar": {"color":"#1694DD","selectedColor": "#FA314A","backgroundColor":"#f9f9f910","borderStyle":"black","position": "bottom","custom": true,"list": [{"pagePath":"pages/home/index","text":"首页","iconPath":"/images/icon/home.png","selectedIconPath": "/images/icon/home_selected.png"},{"pagePath":"pages/doc/index","text":"文档","iconPath":"/images/icon/document.png","selectedIconPath": "/images/icon/document_selected.png"},{"pagePath":"pages/chat/index","text":"消息","iconPath":"/images/icon/chat.png","selectedIconPath": "/images/icon/chat_selected.png"},{"pagePath":"pages/profile/index","text":"我的","iconPath":"/images/icon/user.png","selectedIconPath": "/images/icon/user_selected.png"}]},"usingComponents": {"tabbar":"./custom-tab-bar/index"},"style": "v2","sitemapLocation": "sitemap.json"
}

在custom-tab-bar中的index.wxml里面

<view class="tab-bar"><block wx:for="{{list}}" wx:key="index"><view class="tab-bar-item" bindtap="switchTop" data-active="{{index}}" data-url="{{item.url}}"><image src="{{active===index?item.select_icon:item.icon}}" class="icon"></image><view> {{item.title}}</view></view></block>
</view>

在custom-tab-bar中的index.wxss里面

.tab-bar {display: flex;text-align: center;height: 96rpx;border-top: 1rpx solid rgba(0, 0, 0, 0.3);font-size: 26rpx;padding: 6rpx 0;
}
.tab-bar-item {flex: 1;
}
.icon {width: 48rpx;height: 48rpx;
}

在custom-tab-bar中的index.js里面

// custom-tab-bar/index.js
Component({/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {active:0,list: [{title:'首页',url:'/pages/home/index',icon:'../images/icon/home.png',select_icon:'../images/icon/home_selected.png'},{title:'消息',url:'/pages/chat/index',icon:'../images/icon/chat.png',select_icon:'../images/icon/chat_selected.png'},{title:'文档',url:'/pages/doc/index',icon:'../images/icon/document.png',select_icon:'../images/icon/document_selected.png'},{title:'我的',url:'/pages/profile/index',icon:'../images/icon/user.png',select_icon:'../images/icon/user_selected.png'},]},/*** 组件的方法列表*/methods: {switchTop(e) {// console.log(e);const {active,url} = e.currentTarget.datasetthis.setData({active})wx.switchTab({url})}}
})

为了防止跳转bug，需要在每个页面的onshow生命周期中调用getTabBar（），设置被选中的下标

在pages文件夹里面的home页面中的index.js

  /*** 生命周期函数--监听页面显示*/onShow() {this.getTabBar().setData({active:0})},

在pages文件夹里面的chat页面中的index.js

  /*** 生命周期函数--监听页面显示*/onShow() {this.getTabBar().setData({active:1})},

在pages文件夹里面的doc页面中的index.js

  /*** 生命周期函数--监听页面显示*/onShow() {this.getTabBar().setData({active:2})},

在pages文件夹里面的profile页面中的index.js

  /*** 生命周期函数--监听页面显示*/onShow() {this.getTabBar().setData({active:3})},

页面展示效果

自定义微信小程序TabBar相关推荐

自定义微信小程序tabBar，兼容iPhone异形全面屏
需求开发微信商城会员中心,tabBar有首页及用户中心,当用户没有登录时点击页面任意位置均弹出登录窗口.但是自带的微信tabBar无法被弹出的遮罩层覆盖,从而可以在两个tab之间切换. 解决自己手 ...
微信自定义tabbar有小红点_自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
自定义微信小程序tabBar组件上边框的颜色
背景: 在微信小程序的实际开发过程中,有时候我们需要修改微信小程序提供的 tabBar 组件顶部边框的颜色,以满足项目需求解决方案: 方式一: 通过tabBar组件自带的 borderStyle 属 ...
mpvue自定义微信小程序indicator（指示点）样式
mpvue自定义微信小程序indicator(指示点)样式效果图 HTML <template><div class="container"><sw ...
【微信小程序】微信小程序tabBar使用中不显示问题
微信小程序中tabBar配置微信小程序中下方的tabBar如何配置很多刚刚接触小程序的同学,有些懵.这里给你一个详细的配置文档: 小程序配置 | 微信开放文档具体配置代码如下: "tab ...
使用taro自定义微信小程序导航栏
1.在app.config.js中的window配置项的内容替换为:"navigationStyle":"custom" custom表示自定义导航栏,但会保留 ...
微信小程序tabBar导航栏页和其他页执行onLoad与onShow时机；tabBar页获取不到参数问题；navigateTo跳转无效问题；onShow执行两次问题；
1.注意点: 只有五种情况会触发导航栏tabBar页的onLoad函数,分别是: –1.1:首次进入到导航栏tabBar页面: –1.2:从微信分享进入的导航栏tabBar页面: –1.3:识别二维码 ...
微信小程序uni.switchTab传参获取不到；小程序跳转到tabBar页并传参；uni-app微信小程序获取tabBar页面参数失败；uni-app微信小程序tabBar页面onLoad不执行
需求场景:从非tabBar页面B跳转到tabBar页面A,并想要携带参数. 如果使用uni.switchTab传参,会导致tabBAE页面获取不到参数: 原因: 官方文档有说,uni.switchTa ...
rax自定义微信小程序导航栏
一.导航栏样式背景: 接到一个需求,需要自定义微信导航栏,并且展示如上图存在各种样式: 难点: 兼容IOS刘海屏,IOS药丸屏,安卓无框屏.H5正常屏幕.小程序退出后台不随页面滚动: navigat ...
微信小程序——tabBar使用
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面. 其中 list 接受一 ...

自定义微信小程序TabBar

自定义封装微信小程序`tabBar`

自定义微信小程序TabBar相关推荐

最新文章

热门文章

自定义微信小程序TabBar

自定义封装微信小程序tabBar

自定义微信小程序TabBar相关推荐

最新文章

热门文章

自定义封装微信小程序`tabBar`