当前位置:网站首页>Tabbar configuration at the bottom of wechat applet
Tabbar configuration at the bottom of wechat applet
2022-07-05 12:07:00 【**inevitable**】
List of articles
What is? tabBar
tabBar It is usually used to realize the fast switching of multiple pages , There is usually a bottom tabBar And the top tabBar.tabBar You can only configure at least 2 individual , most 5 individual tab label ; Render top tabBar when , No display icon Icon , Show only text
tabBar Configuration item of node
attribute | type | Must write | describe |
---|---|---|---|
list | String | yes | tabBar Tab list ( least 2 individual , most 5 individual ) |
pagePath | String | yes | Page path , The page must be in pages Predefined in |
text | String | yes | tabBar Text displayed on |
iconPath | String | no | The size of the picture when it is not selected |
selectedIconPath | String | no | The size of the picture when selected |
color | HexColor | no | tab The color of the unselected text on |
selectedColor | HexColor | no | tab The color of the selected text on |
backgroundColor | HexColor | no | tabBar Background color |
borderStyle | String | no | tabBar Top border color ( Support only black/white) |
position | String | no | tabBar The location of ( Support only bottom/top) |
To configure tabBar Steps for options
1. newly added tabBar node
open app.json The configuration file , In the and windows New under level tabBar node
2. newly added list Array
tabBar In nodes , newly added list Array , This array holds each tab The configuration object of the item , The properties contained in the object are as follows :
pagrPath: Specify the current tab Corresponding page path
text: Specify the current tab The text of the button on the
iconPath: Specify the current tab Picture path when not selected
selectedIconPath: Specify the current tab Image path when selected
Icons can go to Ali Icon Library Download
3. change tabBar The color when the upper text is selected
In addition, you can also set other attributes according to your own needs
边栏推荐
- Hiengine: comparable to the local cloud native memory database engine
- 网络五连鞭
- Matlab label2idx function (convert the label matrix into a cell array with linear index)
- Open3D 欧式聚类
- Seven ways to achieve vertical centering
- Principle of redis cluster mode
- Open3d European clustering
- iTOP-3568开发板NPU使用安装RKNN Toolkit Lite2
- redis的持久化机制原理
- 【ijkplayer】when i compile file “compile-ffmpeg.sh“ ,it show error “No such file or directory“.
猜你喜欢
Linux Installation and deployment lamp (apache+mysql+php)
pytorch-权重衰退(weight decay)和丢弃法(dropout)
The survey shows that traditional data security tools cannot resist blackmail software attacks in 60% of cases
iTOP-3568开发板NPU使用安装RKNN Toolkit Lite2
[deploy pytoch project through onnx using tensorrt]
[cloud native | kubernetes] actual battle of ingress case (13)
[yolov5.yaml parsing]
【 YOLOv3中Loss部分计算】
Uniapp + unicloud + Unipay realize wechat applet payment function
13.(地图数据篇)百度坐标(BD09)、国测局坐标(火星坐标,GCJ02)、和WGS84坐标系之间的转换
随机推荐
【ijkplayer】when i compile file “compile-ffmpeg.sh“ ,it show error “No such file or directory“.
【主流Nivida显卡深度学习/强化学习/AI算力汇总】
[cloud native | kubernetes] actual battle of ingress case (13)
Halcon 模板匹配实战代码(一)
自动化测试生命周期
Design of music box based on assembly language
redis的持久化机制原理
Redirection of redis cluster
pytorch-softmax回归
【PyTorch预训练模型修改、增删特定层】
redis主从模式
【使用TensorRT通过ONNX部署Pytorch项目】
[loss functions of L1, L2 and smooth L1]
Redis集群的重定向
Principle of redis cluster mode
11.(地图数据篇)OSM数据如何下载使用
redis集群中hash tag 使用
谜语1
查看rancher中debug端口信息,并做IDEA Remote Jvm Debug
Network five whip