微信小程序之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…

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;那么业务系统也就慢慢的随之加大。信息…

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…

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…

linux 安装gradle7.4.2环境

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

DDos攻击如何被高防服务器有效防范?

德迅云安全-领先云安全服务与解决方案提供商 什么是DDos攻击&#xff1f; DDos攻击是一种网络攻击手段&#xff0c;旨在通过使目标系统的服务不可用或中断&#xff0c;导致无法正常使用网络服务。DDos攻击可以采取多种方式实施&#xff0c;包括洪水攻击、压力测试、UDP Flood…

WPF —— TabControl、StackPanel 控件详解

1 TabControl简介 表示包含多个项的控件&#xff0c;这些项共享屏幕上的同一空间。 TabControl有助于最大程度地减少屏幕空间使用量&#xff0c;同时允许应用程序公开大量数据。 TabControl包含共享同一屏幕空间的多个 TabItem 对象。一次只能看到 TabControl 中的一个 Ta…

java的23种设计模式02-创建型模式02-抽象工厂方法

一、抽象工厂方法 1-1、抽象工厂方法的定义 抽象工厂模式是一个比较复杂的创建型模式。 抽象工厂模式和工厂方法不太一样&#xff0c;它要解决的问题比较复杂&#xff0c;不但工厂是抽象的&#xff0c;产品是抽象的&#xff0c;而且&#xff1a;有多个产品需要创建&#xff…

玩转 Spring 状态机:更优雅的实现订单状态流转

说起 Spring 状态机&#xff0c;大家很容易联想到这个状态机和设计模式中状态模式的区别是啥呢&#xff1f;没错&#xff0c;Spring 状态机就是状态模式的一种实现&#xff0c;在介绍 Spring 状态机之前&#xff0c;让我们来看看设计模式中的状态模式。 1. 状态模式 状态模式…

pytorch之诗词生成3--utils

先上代码&#xff1a; import numpy as np import settingsdef generate_random_poetry(tokenizer, model, s):"""随机生成一首诗:param tokenizer: 分词器:param model: 用于生成古诗的模型:param s: 用于生成古诗的起始字符串&#xff0c;默认为空串:return: …

linux 安装/升级 svn

文章目录 下载最新版本安装包安装 下载最新版本安装包 wget https://dlcdn.apache.org/subversion/subversion-1.14.3.tar.gz tar -zxf subversion-1.14.3.tar.gz cd subversion-1.14.3 安装 ./configure 报错&#xff0c;提示缺少 apr-util 库&#xff0c;有的环境可能 apr 库…