微信小程序之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: 跳转方式,不写的话默认是navigate
    reLaunch 和 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获取网络请求并渲染页面 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Web框架开发-Django的视图层

一、视图函数 一个视图函数,简称视图,是一个简单的Python 函数,它接受Web请求并且返回Web响应。响应可以是一张网页的HTML内容,一个重定向,一个404错误,一个XML文档,或者一张图片. . . 是任何东西都可以。无论视图本身包含什么逻辑,都要返回响应。代码写在哪里也无所谓…

【QT】TCP简易聊天框

我们首先复习一下TCP通信的流程 基于linuxTCP客户端和服务器 QT下的TCP处理流程 服务器先启动&#xff08;处于监听状态&#xff09; 各函数的意义和使用 QTcpServer Class *QTcpServer*类提供了一个基于TCP的服务器。这个类可以接受传入的TCP连接。您可以指定端口或让QTcpS…

解决无法登录到 ArcGIS Server Administrator

目录 问题复现原因分析解决办法 问题复现 今天在访问arcgisserver后台准备设置arcgis api for js请求路径时&#xff0c;登录之后出现500错误。Services Directoryhttp://xxx.xxx.xxx.xxx:6080/arcgis/admin/system/handlers/rest/servicesdirectory 原因分析 我实在两台虚拟机…

信号与系统学习笔记——信号的分类

目录 一、确定与随机 二、连续与离散 三、周期与非周期 判断是否为周期函数 离散信号的周期 结论 四、能量与功率 定义 结论 五、因果与反因果 六、阶跃函数 定义 性质 七、冲激函数 定义 重要关系 作用 一、确定与随机 确定信号&#xff1a;可以确定时间函数…

提升运营效率,探索运营中台架构的力量

随着数字化转型的加速推进&#xff0c;企业需要更高效地管理和运营各项业务&#xff0c;而运营中台架构作为一种新型的业务架构设计理念&#xff0c;正在逐渐受到关注和应用。本篇博客将深入探讨运营中台架构的概念、优势和实践&#xff0c;帮助企业了解如何通过构建运营中台实…

CVPR2023 | 3D Data Augmentation for Driving Scenes on Camera

3D Data Augmentation for Driving Scenes on Camera 摄像机驾驶场景的 3D 数据增强 摘要翻译 驾驶场景极其多样和复杂&#xff0c;仅靠人力不可能收集到所有情况。虽然数据扩增是丰富训练数据的有效技术&#xff0c;但自动驾驶应用中现有的摄像头数据扩增方法仅限于二维图像…

[蓝桥杯]-最大的通过数-CPP-二分查找、前缀和

目录 一、题目描述&#xff1a; 二、整体思路&#xff1a; 三、代码&#xff1a; 一、题目描述&#xff1a; 二、整体思路&#xff1a; 首先要知道不是他们同时选择序号一样的关卡通关&#xff0c;而是两人同时进行两个入口闯关。就是说两条通道存在相同关卡编号的的关卡被通…

PlantUML Integration 编写短信服务类图

PlantUML Integration 写一个类图&#xff0c;主要功能为 1、编写一个serviceSms短信服务类&#xff1b; 2、需要用到短信的地方统一调用基建层的服务即可&#xff1b; 3、可以随意切换、增加短信厂商&#xff0c;不需要更改场景代码&#xff0c;只需要更改application.yml 里面…

SQLiteC/C++接口详细介绍之sqlite3类(七)

上一篇&#xff1a;SQLiteC/C接口详细介绍之sqlite3类&#xff08;六&#xff09; 下一篇&#xff1a; SQLiteC/C接口详细介绍之sqlite3类&#xff08;八&#xff09;&#xff08;未发表&#xff09; 22.sqlite3_create_collation、sqlite3_create_collation16和sqlite3_creat…

JavaEE--小Demo

目录 下载包 配置 修改文件 pom.xml application.properties 创建文件 HelloApi.java GreetingController.java Greeting.java DemoApplication.java 运行包 运行命令 mvn package cd target dir java -jar demo-0.0.1-SNAPSHOT.jar 浏览器测试结果 下载包 …

网络安全专题第一篇:网络安全的来源

目录 一.网络安全的由来。 二.网络安全漏洞在哪里 三.网络安全规范操作 1.从业务入手 2.从安全体系入手 3.从管理入手 四.可能遇到的网络攻击 1.DDOS 2.勒索攻击 3.单包攻击 4.员工删库跑路 5.熊猫烧香 五.应对方法 1.清洗 2.提高服务器的承受能力 3.防火墙 4…

证券公司如何应对大数据调度系统的高负载挑战

​在金融行业&#xff0c;数据处理和任务调度是日常运营的重要组成部分。随着业务量的激增&#xff0c;日益增长的任务量和复杂的资源管理需求&#xff0c;要求该系统不仅要稳如磐石&#xff0c;还需灵活高效。 本文将探讨某证券公司在应对这些挑战时所采用的策略&#xff0c;并…

tomcat的webapp文件中发布web应用

一、Web服务器 1.什么是Web 概述&#xff1a; web(World Wide Web)即全球广域网&#xff0c;也称为万维网&#xff0c;它是一种基于超文本和HTTP的、全球性的、动态交百的、跨平台的分布式图形信息系统。是建立在internet上的一种网络服务&#xff0c;为浏览者在Intern…

笔记80:在 Ubuntu 中安装显卡驱动

一、关于显卡的两个基本概念 -- 显卡驱动 / 显卡BIOS &#xff08;1&#xff09;什么是BIOS BIOS的作用&#xff1a;BIOS是电脑上电开机时加载进内存的第一个程序&#xff0c;CPU会执行他进行系统自检&#xff0c;然后通过其中的指令加载操作系统&#xff1b;例如主板BIOS&am…

react 项目如何暴露 webpack配置文件

首先创建一个项目&#xff1a; // 全局安装 create-react-app 脚手架 npm install create-react-app -g// 创建项目 create-react-app demo 创建完成后&#xff0c;进到项目根目录&#xff0c;执行以下命令&#xff1a; npm run eject 出现以下命令&#xff1a; 选择yes即可…

【Unity】Transform、Rigidbody、CharacterController移动

前言 在使用Unity开发的时候&#xff0c;移动是最最基础的一个需求&#xff0c;我来给大家简单的讲一下Unity中的几种常见的移动方法。 1.Transform移动 Transform移动就是修改物体的position ①修改位置 这里要注意&#xff1a;坐标分为世界坐标和本地坐标 //将物体的世界坐…

import gdal 报错

1.下载gdal https://www.lfd.uci.edu/~gohlke/pythonlibs/#gdal 2.安装正确版本 &#xff08;1&#xff09;查看python版本 python -v我的版本Python 3.7.9 建议下载 GDAL-3.4.2-cp37-cp37m-win_amd64.whl &#xff08;2&#xff09;放到Scripts文件夹下 执行 pip install GD…

Unity Timeline学习笔记(2) - PlayableTrack

PlayableTrack 是可自定义播放的轨道。我们可以通过进入轨道后调用自己的函数方法&#xff0c;使用起来也是比较顺手的。 添加轨道 我们点击加号添加 这样就有一个空轨道了&#xff0c;然后我们创建两个测试脚本。 添加脚本 分别是Playable Behaviour和PlayableAsset脚本。…

吴恩达深度学习笔记:神经网络的编程基础2.9-2.14

目录 第一门课&#xff1a;神经网络和深度学习 (Neural Networks and Deep Learning)第二周&#xff1a;神经网络的编程基础 (Basics of Neural Network programming)2.9 逻辑回归中的梯度下降&#xff08;Logistic Regression Gradient Descent&#xff09; 第一门课&#xff…

vue 基于elementUI/antd-vue, h函数实现message中嵌套链接跳转到指定路由 (h函数点击事件的写法)

效果如图&#xff1a; 点击message 组件中的 工单管理&#xff0c; 跳转到工单管理页面。 以下是基于vue3 antd-vue 代码如下&#xff1a; import { message } from ant-design-vue; import { h, reactive, ref, watch } from vue; import { useRouter } from vue-router; c…