微信小程序之tabBar

1、tabBar

        如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

属性类型必填默认值描述
colorHexColortab 上的文字默认颜色,仅支持十六进制颜色
selectedColorHexColortab 上的文字选中时的颜色,仅支持十六进制颜色
backgroundColorHexColortab 的背景色,仅支持十六进制颜色
borderStylestringblacktabbar 上边框的颜色, 仅支持 black / white
listArraytab 的列表,详见 list 属性说明,最少 2 个、最多 5 个 tab

        其中 list 接受一个数组,只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序,每个项都是一个对象,其属性值如下:

属性类型必填说明
pagePathstring页面路径,必须在 pages 中先定义
textstringtab 上按钮文字
iconPathstring图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon。
selectedIconPathstring选中时的图片路径,icon 大小限制为 40kb,建议尺寸为 81px * 81px,不支持网络图片。
当 position 为 top 时,不显示 icon

在app.json中配置:

 "tabBar": {"backgroundColor":"#F12467","list":[{"text": "首页","pagePath": "pages/navigationBar/navigationBar","iconPath": "/static/icon/home.png","selectedIconPath": "/static/icon/home-fill.png"},{"text": "我的","pagePath": "pages/test1/test1","iconPath": "/static/icon/user (2).png","selectedIconPath": "/static/icon/user.png"}]

图标可以在iconfont-阿里巴巴矢量图标库中获取

2、api中navigate路由接口与组件的关系

urlstring当前小程序内的跳转链接
open-typestring跳转方式 :
合法值说明

navigate

(默认值)

对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 
redirect对应 wx.redirectTo 的功能
switchTab对应 wx.switchTab 的功能
reLaunch对应 wx.reLaunch 的功能
navigateBack对应 wx.navigateBack 或 wx.navigateBackMiniProgram (基础库 2.24.4 版本支持)的功能
exit退出小程序,target="miniProgram"时生效

案例1:navigate和reLaunch : 

<navigator url="/pages/showToast/showToast?id=12345&name=lisi"  style="margin-bottom: 20rpx;">go to showToast 非tabBar页面
</navigator>
<!--open-type: 跳转方式,不写的话默认是navigatereLaunch 和 switchTab都可以进行tabBar页面的跳转,但是reLaunch可以携带参数
-->
<navigator url="/pages/wxfor/wxfor?id=12345&name=lisi" open-type="reLaunch">go to wxfor tabBar页面
</navigator>

案例2: 点击事件进行页面跳转

tabBar页面的话就用wx.reLaunch(Object object)

非tabBar页面就用wx.navigateTo(Object object),因为reLaunch没有左上角的返回箭头:

                        

<view bind:tap="goNavigate" style="width: 200rpx;height: 200rpx;background: chartreuse;"><view><text></text></view><view></view>
</view>
  goNavigate(){// wx.reLaunch({//   url: "/pages/wxfor/wxfor?id=12345&name=lisi"// })wx.navigateTo({url: '/pages/scrollView/scrollView?id=12345&name=lisi',})},
 案例3:navigateBack() 回到上一个页面  

3、wx.request获取网络请求并渲染页面 

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

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

相关文章

Leetcode 3.14

Leetcode hot100 二叉树1.二叉树的层序遍历2.验证二叉搜索树3.二叉树的右视图 二叉树 1.二叉树的层序遍历 二叉树的层序遍历 二叉树的层序遍历可以用先进先出的队列来实现。 将每一层的所有node都添加到队列中&#xff0c;记录下当前队列的长度&#xff0c;即该层的元素数量&…

『 Linux 』进程替换( Process replacement ) 及 简单Shell的实现(万字)

文章目录 &#x1f984; 进程替换&#x1f9a9; execl()函数&#x1f9a9; execlp()函数&#x1f9a9; execle()函数&#x1f9a9; execv()函数&#x1f9a9; execvp()函数&#x1f9a9; execvpe()函数&#x1f9a9; execve()函数 &#x1f984; 简单Shell命令行解释器的实现&a…

【漏洞复现】ChatGPT-Next-Web SSRF漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

Python-sklearn-diabetes项目实战

目录 1 下载数据集和预处理 1.1 加载/下载数据集 1.2 数据可视化 1.3 数据清洗 1.4 特征工程 1.5 构建特征集和标签集 1.6 拆分训练集和测试集 2 训练模型 2.1 选择算法和确定模型 2.2 训练拟合模型 3 评估并优化模型性能 本文以糖尿病数据集diabetes为基础进行线性…

【Node.js从基础到高级运用】十一、构建RESTful API

在本篇博客中&#xff0c;我们将综合之前讨论的内容&#xff0c;深入探索如何使用Node.js构建一个RESTful API。我们将重点讨论设计合理的API端点&#xff0c;展示如何通过代码实现这些端点&#xff0c;并指导如何使用Postman测试我们的API&#xff0c;确保其按预期工作。 前提…

完美解决 RabbitMQ可视化界面Overview不显示折线图和队列不显示Messages

问题场景&#xff1a; 今天使用docker部署了一个RabbitMQ&#xff0c;浏览器打开15672可视化页面发送消息后不显示Overview中的折线图&#xff0c;还有队列中的Messages&#xff0c;因为我要看队列中的消息数量。 解决方案&#xff1a; 进入容器内部 docker exec -it 容器id…

NumPy库中的np.exp和np.exp2

在NumPy库中&#xff0c;np.exp和np.exp2是两个用于计算指数的函数&#xff0c;但它们的基数不同&#xff1a; np.exp(x)&#xff1a;计算自然指数 ex&#xff0c;其中 e 是自然对数的底数&#xff0c;大约等于2.71828。这个函数返回e的x次幂&#xff0c;用于各种自然增长或衰…

Spring Cloud Gateway如何实现熔断

Spring Cloud Gateway熔断集成 熔断应用&#xff1a; 金融市场中的熔断机制&#xff1a;在金融交易系统中&#xff0c;熔断机制&#xff08;Circuit Breaker&#xff09;是一种市场保护措施&#xff0c;旨在预防市场剧烈波动时可能导致的系统性风险。当某个基准指数&#xff08…

MySQL数据库(5)——逻辑处理

逻辑处理 在MySQL中&#xff0c;可以使用逻辑运算符和条件语句来进行逻辑处理。 1.逻辑运算符 and 与or 或not 非 这里用法与Java中的用法相同&#xff0c;只是语法发生了部分变化。 2.case——when逻辑处理 语法&#xff1a; case when 条件 then 结果1 else 结果2 end 注…

基于springboot实现驾校信息管理系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现驾校信息管理系统演示 摘要 随着人们生活水平的不断提高&#xff0c;出行方式多样化&#xff0c;也以私家车为主&#xff0c;那么既然私家车的需求不断增长&#xff0c;那么基于驾校的考核管理也就不断增强&#xff0c;那么业务系统也就慢慢的随之加大。信息…

我们是否生活在一个超大型生物的大脑之中?——对多元宇宙观与生命存在形式的哲学探讨

随着科技和哲学思辨的深入&#xff0c;关于人类所处宇宙的本质及我们自身存在的真实性的讨论越发引人入胜。其中一种颇具科幻色彩的观点认为&#xff0c;我们可能生活在某个巨大生物的大脑之中&#xff0c;所有的物理规律、自然现象以及我们的感知体验&#xff0c;都可能是这个…

15. jwt认证中间件

在上一篇登录功能的实现中&#xff0c;我们使用了jwt作为鉴权组件&#xff0c;其中登录后会颁发token。前端在访问后续请求时&#xff0c;可以带上这个token。对于一些需要权限校验的请求&#xff0c;我们就需要验证这个token&#xff0c;从token中获取到用户id&#xff08;有了…

MQTT.fx实现(MQTT Client)连接物联网平台(ThingsCloud )

目录 概述 1 ThingsCloud平台介绍 2 ThingsCloud创建项目 2.1 创建项目 2.2 创建数据类型 2.3 创建设备类型 3 发布和订阅主题 3.1 发布Topic 3.2 订阅主题Topic 4 使用MQTT.fx 测试ThingsClond 4.1 使用MQTT.fx连接ThingsClond 4.2 MQTT.fx 订阅ThingsCloud Messag…

【JS】前端分片上传大文件(支持1G以上的超大文件)

目录 什么时候需要分片上传&#xff1f;分片上传流程获取文件专属MD5码 什么时候需要分片上传&#xff1f; 如果将大文件一次性上传&#xff0c;耗时会非常长&#xff0c;甚至可能传输失败&#xff0c;那么我们怎么解决这个问题呢&#xff1f;既然大文件上传不适合一次性上传&…

jenkins+maven+gitlab自动化构建打包、部署

Jenkins自动化部署实现原理 环境准备 1、jenkins已经安装好 docker安装jenkins 2、gitlab已经安装好 docker安装gitlab 一、Jenkins系统配置 1.Global Tool Configuration 任务构建所用到的编译环境等配置&#xff0c;配置参考&#xff1a; jdk配置&#xff08;jenkins自带…

GCNv2_SLAM-CPU详细安装教程(ubuntu18.04)

GCNv2_SLAM-CPU详细安装教程-ubuntu18.04 前言一、安装第三方库1.安装Pangolin2.安装OpenCV3.安装Eigen4.安装Pytorch(c) 二、安装以及运行GCNv2_SLAM1.安装编译GCNv2_SLAM2.单目模式运行演示案例 总结 前言 paper:https://arxiv.org/pdf/1902.11046.pdf githup::https://gith…

C#进阶-ASP.NET常用控件总结

一、ASP.NET基础控件 1、asp:TextBox (输入框) ASP.NET TextBox 控件用于接收用户输入。 <asp:TextBox ID"txtInput" runat"server"></asp:TextBox>2、asp:DropDownList (下拉框) ASP.NET DropDownList 控件用于提供一个下拉列表供用户选择…

clickhouse sql语句

查看a表的创建语句 SHOW CREATE TABLE a; 删除表b DROP TABLE b;例如&#xff1a; CREATE TABLE ark_us.d_stk_info_us_polygon_cik_5_w (ticker String,t_date DateTime64(6),name Nullable(String),market Nullable(String),type Nullable(String),cik Nullable(String),…

linux 安装gradle7.4.2环境

1.下载gradle7.4.2工程 百度网盘 请输入提取码百度网盘为您提供文件的网络备份、同步和分享服务。空间大、速度快、安全稳固&#xff0c;支持教育网加速&#xff0c;支持手机端。注册使用百度网盘即可享受免费存储空间https://pan.baidu.com/s/1hoNEFkBJPHAgs9ITAEh3Zg?pwdGJ…

linux下test,/usr/bin/test,[],和/usr/bin/[的作用及用法举例

1.test,/usr/bin/test,[],和/usr/bin/[介绍 首先&#xff0c;linux下test,/usr/bin/test,[],和/usr/bin/[命令都是等价命令 其次&#xff0c;linux下test,/usr/bin/test,[],和/usr/bin/[命令一般用来测试文件类型&#xff0c;或者用来比较字符串 test,/usr/bin/test,[],和/u…