微信小程序自定义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页进行添加的,

{"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的页面加上以下的代码

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 style="color: {{(index == 1 && resultStataus)?'#C9CDD4':(selected === index ? selectedColor : color)}}">{{item.text}}</view>
// index == 1  你想要处理的tab的下标
// 是否要修改tab的判断  resultStataus  true  false  看上面的代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/469188.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

深入浅出rust内存对齐

在 Rust 中&#xff0c;内存对齐是一个重要的概念&#xff0c;它涉及到数据在内存中的存储方式&#xff0c;以及如何优化内存访问的效率。往往一门语言的内存布局以及对齐方式决定了一门语言的性能&#xff0c;因此学会并深入理解rust中内存布局会让我们写出高性能的rust代码&a…

闯关leetcode——3206. Alternating Groups I

大纲 题目地址内容 解题代码地址 题目 地址 https://leetcode.com/problems/alternating-groups-i/description/ 内容 There is a circle of red and blue tiles. You are given an array of integers colors. The color of tile i is represented by colors[i]: colors[i…

HTML5和CSS3的进阶_HTML5和CSS3的新增特性

目录 HTML5的新特性 1. HTML5 的新特性 1.1 HTML5 新增的语义化标签 1.2 HTML5 新增的多媒体标签 1. 视频 2. 音频 3. 多媒体标签总结 1.3 HTML5 新增的 input 类型 1.4 HTML5 新增的表单属性 required 必须输入信息&#xff0c;不能为空&#xff1b; 重点&#xf…

小马识途营销顾问谈百科词条建立的注意事项

百度百科是百度旗下的产品&#xff0c;它就好比是一本网络百科全书&#xff0c;当我们在网络上搜索某个人物或是企业的时候&#xff0c;如果他们有创建百度百科的话就可以搜出来百度百科词条。词条上展示的荣誉、贡献、社会评价或是企业组织架构等方面可以在无形之中提升人物或…

6、If、While、For、Switch

6、If、While、For、Switch 一、If 1、if-else if (boolean) {代码块 } else if (boolean) {代码块 } else if (boolean) {代码块 } else { // 默认情况代码块 }关于IDEA单元测试控制台不能输入数据的问题&#xff1a; https://blog.csdn.net/m0_72900498/article/details/…

华为路由器DHCP配置

一、单臂路由结构的DHCP 1.启动设备 2.将pc设为DHCP获取IP地址 3.交换机创建vlan并设置模式 [SW1]vlan batch 10 20 [SW1]int g0/0/1 [SW1-GigabitEthernet0/0/1]port link-type trunk [SW1-GigabitEthernet0/0/1]port trunk allow-pass vlan all [SW1-GigabitEthernet0…

【Vue】Vue3.0(十七)Vue 3.0中Pinia的深度使用指南(基于setup语法糖)

上篇文章&#xff1a; 【Vue】Vue3.0&#xff08;十一&#xff09;Vue 3.0 中 computed 计算属性概念、使用及示例 &#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f916;Vue专栏&#xff1a;点击&#xff01; ⏰️创作时间&#xff1a;2024年11月10日15点23分 文章…

element plus el-form自定义验证输入框为纯数字函数

element plus 的el-form 使用自定义验证器&#xff0c;验证纯数字&#xff0c;禁止输入小数、中文、字母、特殊符号。input的maxlength为最大输入多少位长度 效果图 <el-form ref"dataFormRef" :model"dataForm" :rules"dataRules" label-w…

SwiftUI(十)- 列表(分组,折叠)

引言 SwiftUI中的List组件不仅可以用户创建简单的列表&#xff0c;和UITableView一样&#xff0c;它也支持分组和折叠功能&#xff0c;让数据展示更具层次感。通过分组功能&#xff0c;我们可以将数据按照特定的逻辑进行组织&#xff0c;而折叠则为用户提供了更为紧凑的界面体…

链表(Linkedlist)

序言 我们都了解链表是一种数据的存储结构&#xff0c;在Java使用中逻辑与c&#xff0c;c语言数据结构别无二致&#xff0c;但主要由于Java中不存在指针的说法&#xff0c;从而导致在实现过程中的代码不同&#xff0c;所以在学习的过程中我们无需过于担心&#xff0c;逻辑都是…

JS之正则表达式

一、什么是正则表达式 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </…

MySQL数据库:本地部署数据库以及安装彩虹猫【Navicat】

文章目录 一.安装前准备工作1.下载并解压文件2.修复电脑缺失的文件 二.本地部署MySQL1.先解压mysql-8.0.25-winx64.zip&#xff0c;并把文件放到安装需要的位置&#xff0c;再把my.ini文件放到mysql-8.0.25-winx64的根目录2.修改注册表的根目录信息为自己的安装装路径3.进命令符…

11个简单易用的电商购物车设计案例

文章目录 前言正文1.扁平化设计购物车2.无表格布局购物车3.美食购物车4.响应式购物车5.jQuery购物车6.动态价格更新购物车7.标签式滑动购物车8.动态商店与购物车一体化设计9.简约清爽的购物车设计10.基于Vue.js的购物车11.域名购物车 总结 前言 现在的电子商务网站&#xff0c…

Stable Diffusion Web UI - ControlNet 姿势控制 openpose

openpose 是 ControlNet 中常用的控制模式之一。 通过 openpose 可以锁定人物姿势&#xff0c;把姿势信息传递给 Stable Diffusion 扩散模型&#xff0c;让其在扩散生成图片的时候遵照特定的任务姿势。 通过 openpose 能够得到类似如下效果&#xff1a; 同样的姿势&#xff0…

Word2Vec,此向量维度,以及训练数据集单条数据的大小,举例说明;Skip-gram模型实现词嵌入;热编码(One-Hot Encoding)和词向量;

目录 Word2Vec Word2Vec,此向量维度,以及训练数据集单条数据的大小,举例说明 一、Word2Vec的词向量维度 二、训练数据集单条数据的大小 综上所述 热编码(One-Hot Encoding)和词向量 一、表示方式 二、维度与计算效率 三、语义捕捉能力 四、举例说明 Skip-gram模…

大模型预训练+微调大模型;大模型提示/指令模式”(Prompt/Instruct Mode)

目录 大模型发布版本 大模型参数量 预训练+微调大模型 预训练大模型的优势 微调的概念与过程 微调的优势 应用场景与案例 提示/指令模式”(Prompt/Instruct Mode) Prompt模式与Instruct模式的区别与联系 Prompt/Instruct模式的应用优势 应用案例 大模型发布版本 大…

WPF在MVVM模式下怎么实现导航功能

在mvvm的模式下wpf通过frame实现页面跳转_哔哩哔哩_bilibili 视频讲解同步可观看 如下图&#xff0c;我们要实现点击左侧的菜单&#xff0c;在右侧展示不同的页面 实现代码如下&#xff1a; 一、如何从主窗体跳转到页面。 1、在mainwindow.xaml的菜单栏代码里加入如下代码 …

ubuntu 22.04 server 安装 anaconda3

ubuntu 22.04 server 安装 anaconda3 https://www.anaconda.com/download/success Anaconda Installers wget https://repo.anaconda.com/archive/Anaconda3-2024.10-1-Linux-x86_64.sh 其他的是 默认 Executing transaction: done installation finished. Do you wish to…

亚信安全新一代WAF:抵御勒索攻击的坚固防线

近年来&#xff0c;勒索攻击已成为黑客的主要攻击手段。新型勒索攻击事件层出不穷&#xff0c;勒索攻击形势愈发严峻&#xff0c;已经对全球制造、金融、能源、医疗、政府组织等关键领域造成严重危害。如今&#xff0c;勒索攻击手段日趋成熟、攻击目标愈发明确&#xff0c;模式…

函数式编程Stream流(通俗易懂!!!)

目录 1.Lambda表达式 1.1 基本用法 1.2 省略规则 2.Stream流 2.1 常规操作 2.1.1 创建流 2.1.2 中间操作 filter map distinct sorted limit ​编辑skip flatMap 2.1.3 终结操作 foreach count max&min collect anyMatch allMatch noneMatch …