微信小程序自定义tabbar;禁用某个tab;修改某个tab的样式

微信小程序自定义tabbar;禁用某个tab;修改某个tab的样式

原本使用本身的tabBar就已经很舒服了,很合适了的,但是总有一些脑洞大开的产品和客户,给你搞点多样式,没办法牛马就得去做咯,现在就给大家说说这个自定义tabbar的做法

无论使用uniapp开发微信小程序还是原生微信小程序的开发,都建议使用微信小程序本身的自定义tabbar组件来进行开发,连uniapp官网都说了使用这个自带的组件custom-tab-bar

微信小程序自定义tabbar组件文档:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html

可以看到,如果使用uniapp开发,可以直接使用custom-tab-bar,uniapp编辑器会自动把这个组件给复制过去,可以安心使用。

一、获取custom-tab-bar

打开上面的组件文档,找到下面的示例代码位置,点击预览效果,然后把打开的代码里面的组件(四个文件都要过去,直接把文件夹custom-tab-bar复制就好了)复制你的项目的根目录上面

二、配置新项目

我是在每个tab页进行添加的,

js 复制代码
{
    "page":[
        {
			"path": "page/component/index",
			"style": {
				"navigationBarTitleText": "tab1",
				"enablePullDownRefresh": false,
				"navigationStyle": "custom"
			},
			"usingComponents": {} //------------修改点1
		},
        .......
    ],
  "tabBar": {
    "custom": true, //----------------------------------------修改点2
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "tab1"
    }, {
      "pagePath": "page/API/index",
      "text": "tab2"
    },
    {
      "pagePath": "page/API/index",
      "text": "tab3"
    }
   ]
  },
}

还有一个很大的坑,在官网里面没有体现出来,但是不加的话,你就会发现你点击tab每次高显的都不是你的点击的tab。那就是要在每一个tab的页面加上以下的代码

js 复制代码
if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
	  	this.$mp.page.getTabBar().setData({
	  		selected: 0 //对应是那个页面就是多少  0 1 2 3,写死
	  	})
		this.$mp.page.getTabBar().init();//这是我为了触发非tab页面进来tab页面的时候custom-tab-bar组件没有刷新
}

三、修改custom-tab-bar

实现不同权限来进行展示不同的tab,写法比较直接。修改组件的index.js

js 复制代码
Component({
	data: {
		selected: 0,
		color: "#ccc",
		selectedColor: "3333cc",
		backgroundColor: "#ffffff",
		list: [{
                "pagePath": "index/index",
                "iconPath": "image/icon_component.png",
                "selectedIconPath": "image/icon_component_HL.png",
                "text": "组件"
              },
              {
                "pagePath": "index/index2",
                "iconPath": "image/icon_API.png",
                "selectedIconPath": "image/icon_API_HL.png",
                "text": "接口"
              },
              {
                "pagePath": "tab1/tabOne",
                "iconPath": "image/icon_API.png",
                "selectedIconPath": "image/icon_API_HL.png",
                "text": "切换"
              }
		],
		resultStataus: false,
	},
	attached() {
		this.init();
	},
	methods: {
		switchTab(e) {
			const data = e.currentTarget.dataset
			const url = data.path
			if (url == 'index/index') {//-------------------禁止某个页面被点击;如果你不想list被减少,只是想禁用可以这样使用
				if (this.data.resultStataus) {
					return
				}
			}
			wx.switchTab({
				url
			})
			this.setData({
				selected: data.index
			})
		},
		init() {
			try {
				var userInfo = wx.getStorageSync('loginInfo')
				if (userInfo) {
					let type = JSON.parse(userInfo).type
					let result = type == 1 ? true:false;  //根据不同的用户角色
					console.log('用户角色', result);
					this.setData({
						resultStataus: result
					})
					if (result) {
                        //少一个tab
						this.setData({
							list: [{
                                        "pagePath": "index/index",
                                        "iconPath": "image/icon_component.png",
                                        "selectedIconPath": "image/icon_component_HL.png",
                                        "text": "组件"
                                      },
                                      {
                                        "pagePath": "index/index2",
                                        "iconPath": "image/icon_API.png",
                                        "selectedIconPath": "image/icon_API_HL.png",
                                        "text": "接口"
                                      },
							]
						})
					} else {
                        //建议为false的时候也要把tablist再赋值一次,不然怕你切换登录的时候会导致页面有缓存没有更新list
						this.setData({
							list: [{
                                        "pagePath": "index/index",
                                        "iconPath": "image/icon_component.png",
                                        "selectedIconPath": "image/icon_component_HL.png",
                                        "text": "组件"
                                      },
                                      {
                                        "pagePath": "index/index2",
                                        "iconPath": "image/icon_API.png",
                                        "selectedIconPath": "image/icon_API_HL.png",
                                        "text": "接口"
                                      },
                                      {
                                        "pagePath": "tab1/tabOne",
                                        "iconPath": "image/icon_API.png",
                                        "selectedIconPath": "image/icon_API_HL.png",
                                        "text": "切换"
                                      }
							]
						})
					}
				}
			} catch (e) {

			}
		}
	}
})

如果你要禁用某一个tab就可以在点击tab里面加一个判断

js 复制代码
if (url == 'index/index') {//-------------------禁止某个页面被点击;如果你不想list被减少,只是想禁用可以这样使用
    if (this.data.resultStataus) {
        return
    }
}
wx.switchTab({
    url
})

如果你想把禁用的这个tab,把图标置灰,文字颜色也进行修改

js 复制代码
//图标置灰,最直接方法就是上面判断用户类型赋值list的时候,换一个在图标
{
    {
        "pagePath": "tab1/tabOne",
        "iconPath": "image/icon_API_none.png", //  ---------------直接换图标
        "selectedIconPath": "image/icon_API_HL.png",
        "text": "切换"
      }
}
//修改文字颜色。在组件的index.wxml的页面直接加判断
<view style="color: {{(index == 1 && resultStataus)?'#C9CDD4':(selected === index ? selectedColor : color)}}">{{item.text}}</view>
// index == 1  你想要处理的tab的下标
// 是否要修改tab的判断  resultStataus  true  false  看上面的代码
相关推荐
licy__4 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_99225027713 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
说私域1 天前
基于“开源 2+1 链动模式 S2B2C 商城小程序”的社区团购运作主体特征分析
大数据·人工智能·小程序
HUODUNYUN1 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
guanpinkeji1 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
paterWang1 天前
小程序-基于java+SpringBoot+Vue的小区服务管理系统设计与实现
java·spring boot·小程序
尘浮生1 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入1 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
tundra381 天前
DTH11传感器温度湿度+esp8266+阿里云+小程序
阿里云·小程序·云计算
虞书欣的61 天前
Python小游戏28——水果忍者
开发语言·人工智能·游戏·小程序·pycharm