Detailed explanation of Tabbar examples in WeChat applet development

高洛峰
Release: 2017-03-15 16:03:18
Original
2564 people have browsed it

This article mainly introduces relevant information about the detailed explanation of Tabbar examples for WeChat mini program development. Friends in need can refer to

WeChat mini program Tabbar

1 .Download WeChat applet development software;

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

2. Scan the QR code to log in, and click Confirm Login on your mobile phone

Detailed explanation of Tabbar examples in WeChat applet development

3. Create a new project, select No APPID here, and fill in the APPID if needed. You need to register in the WeChat applet, then you can get the APPID, fill in the project name, and select the project directory (Note: The WeChat applet will not create the main directory file by itself, so create a project folder yourself first. Then choose to store it in this folder), add the project, and a project project is generated. Note that there is a radio button button . If you cancel this radio button, it will Create an empty project, and I choose to select this button;

Detailed explanation of Tabbar examples in WeChat applet development

#4. Then I get a new project. Now I want to put a tabbar below. Create a new one first. image directory, right-click the directory->New->Directory

Detailed explanation of Tabbar examples in WeChat applet development

Detailed explanation of Tabbar examples in WeChat applet development

##5. Click the image folder ->Open the hard disk and pull

picture into the sub-directory. Note: the picture size is limited to 40kb, size 81px * 81px;

Detailed explanation of Tabbar examples in WeChat applet development
# #6. Let’s take a look at

Directory structure

first. The program has two directories, one pages and utils. Pages contains index and logs. These two directories are two pages (the first page is what you see when you run the program. , the second page comes out by clicking on our avatar), we will use these two pages as tabbar pages; Click click app.

json

Write tabbar control ;For convenience, I put the image in the root directory, select the image directory and right-click->Open hard disk->copythe Image directory to the root directory,delete The original directory is enough, the code is as follows:

Detailed explanation of Tabbar examples in WeChat applet development
Method description:

color: No font color selected

selectedColor: Select the font color


b

ord

erStyle: The color of the line above the tabbar white (only white and black are supported)

background

Color: tabbar background color
network

Time

out: Set network timeout time
debug: Set debug mode to open

The effect is as shown:

Detailed explanation of Tabbar examples in WeChat applet development
Note: The page of

list

is not allowed to be registered in the pages of app.json;

Detailed explanation of Tabbar examples in WeChat applet development

Thank you for reading, I hope it can help you, thank you for your support of this site!

The above is the detailed content of Detailed explanation of Tabbar examples in WeChat applet development. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact [email protected]
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!