微信小程序开发实战 ⑨(TabBar)

请添加图片描述

@作者 : SYFStrive

 
请添加图片描述

@博客首页 : HomePage

📜: 微信小程序

📌:个人社区(欢迎大佬们加入) 👉:社区链接🔗

📌:觉得文章不错可以点点关注 👉:专栏连接🔗

💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞😀

请添加图片描述
在这里插入图片描述
相关专栏

👉 微信小程序(🔥)

目录

  • 全局配置 - TabBar
    • 👨‍🦲TabBar❓
    • 👨‍🦲TabBar的 6 个组成部分
    • 👨‍🦲TabBar节点的配置项
    • 👨‍🦲每个 Tab 项的配置选项
    • 👨‍🦲简单配置Tab栏
  • 小程序的页面配置
  • 最后

全局配置 - TabBar

👨‍🦲TabBar❓

tabBar 是移动端应用常见的页面效果,用于实现多页面的快速切换。

小程序中通常将其分为:

  1. 顶部 tabBar
  2. 底部 tabBar

注意:

  1. tabBar中只能配置最少 2 个、最多 5 个 tab 页签
  2. 当渲染顶部 tabBar 时,不显示 icon,只显示文本

👨‍🦲TabBar的 6 个组成部分

  • tabBar 的 6 个组成部分

① backgroundColor:tabBar 的背景色
② selectedIconPath:选中时的图片路径
③ borderStyle:tabBar 上边框的颜色
④ iconPath:未选中时的图片路径
⑤ selectedColor:tab 上的文字选中时的颜色
⑥ color:tab 上文字的默认(未选中)颜色

在这里插入图片描述

👨‍🦲TabBar节点的配置项

属性类型必填默认值描述
positionStringbottomtabBar 的位置,仅支持 bottom/top
borderStyleStringblacktabBar 上边框的颜色,仅支持 black/white
colorHexColortab 上文字的默认(未选中)颜色
selectedColorHexColortab 上的文字选中时的颜色
backgroundColorHexColortabBar 的背景色
listArraytab 页签的列表,最少 2 个、最多 5 个 tab

👨‍🦲每个 Tab 项的配置选项

属性类型必填描述
pagePathString页面路径,页面必须在 pages 中预先定义
textStringtab 上显示的文字
iconPathString未选中时的图标路径;当 postion 为 top 时,不显示 icon
selectedIconPathString选中时的图标路径;当 postion 为 top 时,不显示 icon

👨‍🦲简单配置Tab栏

至少创建两个页面 👉 获取icon图标 👉 完成tab栏切换 如 👇

在这里插入图片描述

小程序的页面配置

  1. 页面配置文件的作用

    小程序中,每个页面都有自己的 .json 配置文件,用来对当前页面的窗口外观、页面效果等进行配置。

  2. 页面配置和全局配置的关系

    小程序中,app.json 中的 window 节点,可以全局配置小程序中每个页面的窗口表现。

    如果某些小程序页面想要拥有特殊的窗口表现,此时,“页面级别的 .json 配置文件”就可以实现这种需求。

    注意:当页面配置与全局配置冲突时,根据就近原则,最终的效果以页面配置为准。

  3. 页面配置中常用的配置项

属性类型默认值描述
navigationBarBackgroundColorHexColor#000000当前页面导航栏背景颜色,如 #000000
navigationBarTextStyleStringwhite当前页面导航栏标题颜色,仅支持 black / white
navigationBar TitleTextString当前页面导航栏标题文字内容
backgroundColorHexColor#ffffff当前页面窗口的背景色
backgroundTextStyleStringdark当前页面下拉 loading 的样式,仅支持 dark / light
enablePullDownRefreshBooleanfalse是否为当前页面开启下拉刷新的效果
onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离,单位为 px

最后

在这里插入图片描述
本文到这里就结束了,大佬们的支持是我持续更新的最大动力,希望这篇文章能帮到大家💪

 

                 相关专栏连接🔗

在这里插入图片描述

下篇文章再见ヾ( ̄▽ ̄)ByeBye

在这里插入图片描述

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

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

相关文章

【Unittest】自动化测试框架核心要素

1、什么是Unittest框架? python自带一种单元测试框架 2、为什么使用UnitTest框架? >批量执行用例 >提供丰富的断言知识 >可以生成报告 3、核心要素: 1). TestCase(测试用例) 2). TestSuite(测试套件)…

WalkRE--刷图流程(超具体)

1、打开WalkRE软件,界面如下: 2、选择“根据模板新建工程”。操作如下: 3、导入数据。需要准备好dxf格式的CAD地形数据。操作如下: 在空白处右键,先关闭所有层(大部分层在刷图时用不上,仅打开刷…

如何监控电动车充电桩能耗?

一 背景 随着新能源汽车的快速发展,像特斯拉、BYD、蔚来、小鹏和理想等品牌的电动汽车在我们的日常生活中越来越多了,可见电动汽车如今已逐渐被我们所认可了。同汽油车需要加油一样,电动汽车需要充电,如此一来,电动汽…

C++进阶 —— multimap

目录 一&#xff0c;multimap介绍 类pair 函数模板make_pair 二&#xff0c;multimap使用 一&#xff0c;multimap介绍 multimap是关联式容器&#xff0c;按照特定顺序存储键值对<key、value>&#xff0c;其中多个键值对之间的key可以重复&#xff1b;键key通常用于排…

供应链 | 在线平台的研究与思考(一):销售渠道与模式选择

封面图来源&#xff1a; https://www.pexels.com/zh-cn/photo/4968391/ 编者按 当前&#xff0c;电商平台主要采用两种销售模式&#xff1a;代理和分销。商家根据自身情况选择线上或线下渠道&#xff0c;而电商平台会根据不同的线上商家选择适当的分销模式。本期编者精选的两…

C++环形缓冲区设计与实现:从原理到应用的全方位解析

C环形缓冲区设计与实现&#xff1a;从原理到应用的全方位解析 一、环形缓冲区基础理论解析&#xff08;Basic Theory of Circular Buffer&#xff09;1.1 环形缓冲区的定义与作用&#xff08;Definition and Function of Circular Buffer&#xff09;1.2 环形缓冲区的基本原理&…

Smartbi“三步走”构建智慧经营分析平台,实现国有企业监管报送和数智化转型

01. 现状与痛点 — 一直以来&#xff0c;国资国企都是促进我国经济高速发展的领头羊&#xff0c;但近年来受疫情冲击和国际经济下行影响&#xff0c;国资企业经营面临较大压力&#xff0c;同时为实现国有企业高质量发展&#xff0c;国务院国资委下发一系列政策要求&#xff…

linuxOPS基础_vmware虚拟机安装及介绍

虚拟机概念 什么是虚拟机&#xff1f; 虚拟机&#xff0c;有些时候想模拟出一个真实的电脑环境&#xff0c;碍于使用真机安装代价太大&#xff0c;因此而诞生的一款可以模拟操作系统运行的软件。 虚拟机目前有2 个比较有名的产品&#xff1a;vmware 出品的vmware workstatio…

chatgpt赋能python:Python如何创建一个DataFrame

Python如何创建一个DataFrame 在数据科学和分析领域中&#xff0c;DataFrame是一种非常常见的数据结构。它类似于电子表格&#xff0c;可以存储和处理包含多个列和行的数据。在Python中&#xff0c;pandas库提供了DataFrame数据结构的支持。 什么是DataFrame&#xff1f; Da…

C++ list类成员函数介绍

目录 &#x1f914;list模板介绍&#xff1a; &#x1f914;特点&#xff1a; &#x1f914;list内存结构图解&#xff1a; &#x1f914; list的成员函数&#xff1a; &#x1f60a;list构造函数&#xff1a; &#x1f50d;代码示例&#xff1a; &#x1f50d;运行结果&…

RobotFramework接口测试方案

1. Robot FrameWork介绍 1.1 介绍 Robot Framework是用于验收测试和回归测试的通用测试自动化框架。它使用易于理解的表格数据语法&#xff0c;非常友好的实现了关键字驱动和数据驱动模式。它的测试功能可以通过使用Python或Java实现的测试库进行扩展&#xff0c;用户可以使用…

【JavaSE】Java基础语法(十七)

文章目录 1. final2. 代码块2.1 代码块概述2.2 代码块分类 1. final fianl关键字的作用 final代表最终的意思&#xff0c;可以修饰成员方法&#xff0c;成员变量&#xff0c;类 final修饰类、方法、变量的效果 fianl修饰类&#xff1a;该类不能被继承&#xff08;不能有子类&a…

软件测试基础概念

目录 软件测试的生命周期如何描述一个bug如何定义bug的级别bug的生命周期产生争执怎么办&#xff08;处理人际关系&#xff09;如何开始第一次测试测试的执行和bug管理如何发现更多的bug 软件测试的生命周期 需求分析 – 测试计划 – 测试设计、测试开发 – 测试执行 – 测试评…

界面控件DevExpress WinForms全新的UI模板,解决各种业务线需求!

去年秋天DevExpress官方发布了一个新的 WinForms UI模板预览版&#xff08;第一个EAP只提供给DevExpress宇宙版激活的用户&#xff09; &#xff0c;这些精炼的、随时可用的“模板”旨在启动表单设计/开发过程。有了这个模板&#xff0c;用户可以创建/交付现成的UI解决方案&…

Jenkins——maven 插件配置

文章目录 一、Maven 的集成二、在执行job的机器上安装好maven三、下载 maven 插件四、配置全局工具五、Maven 相关使用1、新建 job2、自由风格 job 中命令行使用 mvn 命令3、构建操作 一、Maven 的集成 在 Jenkins 上构建 Java 项目时需要使用 Maven 来进行构建打包 二、在执…

cisp pte模拟题

1.信息搜集 本题共三个key 端口 1433 27689 存活ip 192.168.85.137 2.访问网站27689进行信息搜集 一个登录框&#xff0c;sql注入失败&#xff0c;暴力破解失败 扫描目录 发现三个文件robots.txt ,web.config 除了robots.txt,其他都访问不了 访问robots.txt,发现一个file参数…

在职阿里8年,一个31岁女软件测试工程师的心声

简单的先说一下&#xff0c;坐标杭州&#xff0c;13届本科毕业&#xff0c;算上年前在阿里巴巴的面试&#xff0c;一共有面试了有6家公司&#xff08;因为不想请假&#xff0c;因此只是每个晚上去其他公司面试&#xff0c;所以面试的公司比较少&#xff09; 其中成功的有4家&am…

chatgpt赋能python:使用Python创建结构体:完全指南

使用Python创建结构体&#xff1a;完全指南 在Python编程领域&#xff0c;结构体是一种非常方便和有用的数据类型&#xff0c;用于存储和组织相关变量。在本篇文章中&#xff0c;我们将讨论如何使用Python创建结构体。让我们开始吧&#xff01; 什么是结构体&#xff1f; 结…

CodeForces..构建美丽数组.[简单].[情况判断].[特殊条件下的最小值奇偶问题]

题目描述&#xff1a; 题目解读&#xff1a; 给定数组a[n]&#xff0c;ai>0&#xff0c;问能否得到一个数组b[n]&#xff0c;数组b中的元素都大于0且全奇or全偶。 数组b中的元素biai or ai-aj&#xff08;1<j<n&#xff09;。 解题思路&#xff1a; 数组b中的元素都…

Zotero之多篇文献引用

前提 需看下我的这篇&#xff1a;Zotero文献在word中的引用 具体操作 Step01 在Word中引用多篇文献 点击“Add/Edit Citation”在跳出的Zotero搜索框中&#xff0c;选择“经典视图”在跳出的“添加/编辑引注”界面中&#xff0c;点击“多重来源”&#xff08;单一来源&…
最新文章