建网站买的是什么,wordpress商品多选,怀化举报网站,四川建设局网站首页微信小程序自定义tabbar#xff1b;禁用某个tab#xff1b;修改某个tab的样式
原本使用本身的tabBar就已经很舒服了#xff0c;很合适了的#xff0c;但是总有一些脑洞大开的产品和客户#xff0c;给你搞点多样式#xff0c;没办法牛马就得去做咯#xff0c;现在就给大…微信小程序自定义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-baruniapp编辑器会自动把这个组件给复制过去可以安心使用。
一、获取custom-tab-bar
打开上面的组件文档找到下面的示例代码位置点击预览效果然后把打开的代码里面的组件四个文件都要过去直接把文件夹custom-tab-bar复制就好了复制你的项目的根目录上面 二、配置新项目 我是在每个tab页进行添加的
{page:[{path: page/component/index,style: {navigationBarTitleText: tab1,enablePullDownRefresh: false,navigationStyle: custom},usingComponents: {} //------------修改点1},.......],tabBar: {custom: true, //----------------------------------------修改点2color: #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的页面加上以下的代码
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
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.datasetconst url data.pathif (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).typelet result type 1 ? true:false; //根据不同的用户角色console.log(用户角色, result);this.setData({resultStataus: result})if (result) {//少一个tabthis.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再赋值一次不然怕你切换登录的时候会导致页面有缓存没有更新listthis.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里面加一个判断
if (url index/index) {//-------------------禁止某个页面被点击如果你不想list被减少只是想禁用可以这样使用if (this.data.resultStataus) {return}
}
wx.switchTab({url
})如果你想把禁用的这个tab把图标置灰文字颜色也进行修改
//图标置灰最直接方法就是上面判断用户类型赋值list的时候换一个在图标
{{pagePath: tab1/tabOne,iconPath: image/icon_API_none.png, // ---------------直接换图标selectedIconPath: image/icon_API_HL.png,text: 切换}
}
//修改文字颜色。在组件的index.wxml的页面直接加判断
view stylecolor: {{(index 1 resultStataus)?#C9CDD4:(selected index ? selectedColor : color)}}{{item.text}}/view
// index 1 你想要处理的tab的下标
// 是否要修改tab的判断 resultStataus true false 看上面的代码
