小程序自定义tabbar

前言

使用小程序默认的tabbar可以满足常规开发,但是满足不了个性化需求,如果想个性化开发就需要用到自定义tabbar,以下图为例子
在这里插入图片描述

一、在app.json配置

先按照以往默认的形式配置,如果中间的样式特殊则不需要配置

"tabBar": {"custom":true,  // 开启自定义tabbar"color": "#333333",  // tabbar文字默认颜色"selectedColor": "#2E41FF", // tabbar文字选中颜色"list": [{"pagePath": "pages/index/index","iconPath": "images/customTabBar/home.png","selectedIconPath": "images/customTabBar/homeSelect.png","text": "首页"},{"pagePath": "pages/user/user","iconPath": "images/customTabBar/my.png","selectedIconPath": "images/customTabBar/mySelect.png","text": "我的"}]
},

二、在app.js中配置

tabBar: {"color": "#333333","selectedColor": "#2E41FF","list": [{"pagePath": "/pages/index/index","iconPath": "/images/customTabBar/home.png","selectedIconPath": "/images/customTabBar/homeSelect.png","text": "首页","selected":true  //该tabbar是否选中的标识},{"pagePath": '',"iconPath": '/images/customTabBar/camera.png',"selectedIconPath": '/images/customTabBar/camera.png',"isSpecial": true,  //是否为特殊的那个tab"selected":false},{"pagePath": "/pages/user/user","iconPath": "/images/customTabBar/my.png","selectedIconPath": "/images/customTabBar/mySelect.png","text": "我的","selected":false}]
}

三、app.js注册tabbar点击方法

主要作用为控制跳转的路径当前tab及选中的样式

editTabbar() {let tabbar = this.globalData.tabBar;let currentPages = getCurrentPages();let _this = currentPages[currentPages.length - 1];let pagePath = _this.route;(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);for (let i in tabbar.list) {tabbar.list[i].selected = false;(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);}_this.setData({tabbar: tabbar});
},

四、封装自定义tabbar组件

1.html

<view class="ub-tab-bar"><block wx:for="{{tabbar.list}}" wx:key="index"><!-- 中间特殊tab --><view wx:if="{{item.isSpecial}}" class="ub-tab-bar-item" bindtap="camera"><image mode="widthFix" src="{{item.iconPath}}" class="{{item.pagePath === '' ? 'ub-camera' : ''}}"></image><view>{{item.text}}</view></view><!-- 两侧tab -->  <navigator wx:else class="ub-tab-bar-item" hover-class="none" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="switchTab"><image mode="widthFix"  src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image><view>{{item.text}}</view></navigator></block>
</view>

2.json

接收父组件传过来的值

properties: {tabbar: {type: Object}
},

五、在用到的页面引用tabbar组件

在需要用到tabbar的页面引用

1.json中引用

 "usingComponents": {"tabBar": "/components/customTabBar/customTabBar",}

2.js

data中获取在app.js定义的tabBar

data: {tabBar:app.globalData.tabBar
}
//隐藏移动的tabbar并调用app.js定义的方法
onLoad(){wx.hideTabBar()app.editTabbar();
}

3.html中引用

获取到的方法想子组件中传递

<tabBar tabbar="{{tabBar}}"></tabBar>

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

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

相关文章

来可LCWLAN-600P产品使用和常见问题说明

01LCWLAN-600P简介 LCWLAN-600P是来可电子最新生产的一款CAN转WiFi设备&#xff0c;该设备的主要功能是将CAN数据转换成网络数据并通过无线网络转发出去。设备支持8~30V宽压供电&#xff0c;出厂默认配置为AP模式&#xff0c;设备供电后可在电脑的WiFi搜索栏搜索到名称为LCWLA…

【计算机网络】网络编程接口 Socket API 解读(3)

Socket 是网络协议栈暴露给编程人员的 API&#xff0c;相比复杂的计算机网络协议&#xff0c;API 对关键操作和配置数据进行了抽象&#xff0c;简化了程序编程。 本文讲述的 socket 内容源自 Linux 发行版 centos 9 上的 man 工具&#xff0c;和其他平台&#xff08;比如 os-x …

【Linux-Day10-信号量,共享内存,消息队列】

信号量 信号量描述 信号量是一个特殊的变量&#xff0c;一般取正数值。它的值代表允许访问的资源数目&#xff0c;获取资源 时&#xff0c;需要对信号量的值进行原子减一&#xff0c;该操作被称为 P 操作。 当信号量值为 0 时&#xff0c;代表没有资源可用&#xff0c;P 操作…

2022年全国研究生数学建模竞赛华为杯B题方形件组批优化问题求解全过程文档及程序

2022年全国研究生数学建模竞赛华为杯 B题 方形件组批优化问题 原题再现&#xff1a; 背景介绍   智能制造被“中国制造2025”列为主攻方向, 而个性化定制、更短的产品及系统生命周期、互联互通的服务模式等成为目前企业在智能制造转型中的主要竞争点。以离散行业中的产品为…

20230912java面经整理

1.gc算法有哪些 引用计数&#xff08;循环引用&#xff09;和可达性分析找到无用的对象 标记-清除&#xff1a;简单&#xff0c;内存碎片&#xff0c;大对象找不到空间 标记-复制&#xff1a;分成两半&#xff0c;清理一半&#xff0c;没有碎片&#xff0c;如果存活多效率低&a…

Python之离线安装第三方库

1、场景介绍 在一些服务器上&#xff0c;我们搭建完Python环境之后&#xff0c;因为服务器的网络限制原因&#xff0c;不能直接通过pip命令下载安装Python的依赖包。 因此&#xff0c;我们需要在可以正常上网的服务器上下载好所需的依赖包文件&#xff0c;然后拷贝到目标服务器…

嘉泰实业:真实低门槛,安全有保障

在互联网金融大行其道的当下&#xff0c;无论用户是多么的青睐、喜爱这种便捷的理财方式&#xff0c;也一定得把资金安全放在心上。要投就投那些实力背景雄厚&#xff0c;诚信经营的平台&#xff0c;可以选择投资用户基数庞大的理财老品牌&#xff0c;也可以选择发展势头迅猛的…

OneFormer: One Transformer to Rule Universal Image Segmentation论文笔记

论文https://arxiv.org/pdf/2211.06220.pdfCodehttps://github.com/SHI-Labs/OneFormer 文章目录 1. Motivation2. 方法2.1 与Mask2Former的相同之处2.2 OneFormer创新之处2.3 Task Conditioned Joint Training2.4 Query Representations2.4 Task Guided Contrastive Queries 3…

备忘录模式简介

概念&#xff1a; 备忘录模式&#xff08;Memento Pattern&#xff09;是一种行为型设计模式&#xff0c;它允许在不暴露对象内部状态的情况下捕获和恢复对象之前的状态。该模式通过将对象的状态封装到备忘录中&#xff0c;并将其保存在一个管理者类中&#xff0c;从而实现了对…

【Redis】为什么要学 Redis

文章目录 前言一、Redis 为什么快二、Redis 的特性2.1 将数据储存到内存中2.2 可编程性2.3 可扩展性2.4 持久性2.5 支持集群2.6 高可用性 三、Redis 的应用场景四、不能使用 Redis 的场景 前言 关于为什么要学 Redis 这个问题&#xff0c;一个字就可以回答&#xff0c;那就是&…

学习记忆——宫殿篇——记忆宫殿——数字编码——记忆数字知识点

面对错综复杂的数字信息&#xff0c;我们想要记住可以通过以下三点&#xff1a; 1、首先找到关键词 2、数字编码牢记 3、关键词跟编码链接 案例&#xff1a;会计考试-时间期限为 3、7、10 日、1 年的知识点 3 天 (1)托收承付的承付期验单付款为 3 天。 (2)失票人应当在通…

帝国cms后台访问链接提示“非法来源”解决方法

提示“非法来源”的原因 帝国CMS更新升级7.2后,新增了后台安全模式,后台推出了金刚模式来验证链接来源。后台所有链接都需要登录后才能访问,直接强制访问后台页面链接都会提示“非法来源”。不是正常登录后台的用户无法直接访问到内容,保证了后台数据安全。 那么我们在日常…

【设计模式】三、概述分类+单例模式

文章目录 概述设计模式类型 单例模式饿汉式&#xff08;静态常量&#xff09;饿汉式&#xff08;静态代码块&#xff09;懒汉式(线程不安全)懒汉式(线程安全&#xff0c;同步方法)懒汉式(线程安全&#xff0c;同步代码块)双重检查静态内部类枚举单例模式在 JDK 应用的源码分析 …

SpringMVC实现文件上传和下载功能

文件下载 ResponseEntity用于控制器方法的返回值类型&#xff0c;该控制器方法的返回值就是响应到浏览器的响应报文。具体步骤如下&#xff1a; 获取下载文件的位置&#xff1b;创建流&#xff0c;读取文件&#xff1b;设置响应信息&#xff0c;包括响应头&#xff0c;响应体以…

04-Redis哨兵高可用架构

上一篇&#xff1a;03-Redis主从架构 架构说明 sentinel哨兵是特殊的redis服务&#xff0c;不提供读写服务&#xff0c;主要用来监控redis实例节点。 哨兵架构下client端第一次从哨兵找出redis的主节点&#xff0c;后续就直接访问redis的主节点&#xff0c;不会每次都通过s…

【2023最新B站评论爬虫】用python爬取上千条哔哩哔哩评论

文章目录 一、爬取目标二、展示爬取结果三、爬虫代码四、同步视频五、附完整源码 您好&#xff0c;我是 马哥python说&#xff0c;一枚10年程序猿。 一、爬取目标 之前&#xff0c;我分享过一些B站的爬虫&#xff1a; 【Python爬虫案例】用Python爬取李子柒B站视频数据 【Pyt…

Java实现合并多个excel操作

涉及较多封装的工具类&#xff0c;所有依赖的工具类均提供代码&#xff0c;根据名称新建对应的类&#xff0c;在每个工具类中再引入相应的依赖即可 首先需要明确的是&#xff0c;需要合并的每个excel的表头名称必须是相同的&#xff0c; 针对表头&#xff0c;建立传输的dto&a…

【Spring】Ioc容器

&#x1f388;博客主页&#xff1a;&#x1f308;我的主页&#x1f308; &#x1f388;欢迎点赞 &#x1f44d; 收藏 &#x1f31f;留言 &#x1f4dd; 欢迎讨论&#xff01;&#x1f44f; &#x1f388;本文由 【泠青沼~】 原创&#xff0c;首发于 CSDN&#x1f6a9;&#x1f…

IDEA设置Maven 镜像

第一步&#xff1a;右键项目&#xff0c;选择Maven->Create ‘settings.xml’ 已经存在的话是Open ‘settings.xml’&#xff1a; 第二步&#xff1a;在settings.xml文件中增加阿里云镜像地址&#xff0c;代码如下&#xff1a; <?xml version"1.0" encodin…

Android Ble蓝牙App(七)扫描过滤

Ble蓝牙App&#xff08;七&#xff09;扫描过滤 前言目录正文一、增加菜单二、使用MMKV① 添加依赖② 封装MMKV③ 使用MMKV 三、过滤空设备名四、过滤Mac地址五、过滤RSSI六、源码 前言 在上一篇文章中了解了MTU的相关知识以及对于设备操作信息的展示&#xff0c;本篇文章中将增…