[wechat applet] global style, local style, global configuration

Author's brief introduction ： Su Liang （ Focus on web crawlers , Data analysis , On the way to learning the front end ）
Blog home page ： Su Liang .py The blog of
Series column ： Basic course of applet development
Aphorisms ： The sea is wide with fish , The sky is high and the birds are flying .
If you think the blogger's article is good , I hope you can support me for the third time in a row ！！！
Follow the likes collection

Style import

Use wxss Provided @import grammar , You can import an external style sheet .

@import grammar

@import Followed by the relative path of the external stylesheet to be imported , use ; End of statement .

example ：

1. Create a folder in the root directory , Create one in the folder wxss file
   
2. In the wxss Write down style , And in page wxss Import the style into the file .
   
   In this way, you can import the outreach style .
   

Global style

The global style is app.wxss This file , The styles in this will be applied to the overall situation . For every page .

Local style

In the page .wxss Files belong to local styles , Only works on the current page .

Be careful :

1. When a local style conflicts with a global style , according to Nearby principle , Local styles override global styles
2. When the weight of the local style is greater than or equal to the weight of the global style , Will override the global style

Global configuration

In the applet root directory app.json File is the global configuration file of the applet . Common configuration items are as follows :

• pages
  Record the storage path of all pages of the current applet
• window
  Set the appearance of the applet window globally
• tabBar
  Set the at the bottom of the applet tabBar effect
• style
  Whether to enable the new component style

The window component of the applet

window The navigation bar area and background area of the applet can be configured .

Global configuration –window

Commonly used window Configuration properties

Property name	type	The default value is	explain
navigationBarTitleText	String	character string	Navigation bar title text content
navigationBarBackgroundColor	Hexcolor	#000000	Navigation bar background color , Such as #000000
navigationBarTextStyle	String	white	Navigation bar Title Color , Support only black / white
backgroundColor	Hexcolor	#ffffff	Background color of window
backgroundTextStyle	string	dark	The drop-down loading The style of , Support only dark / light
enablePullDownRefresh	Boolean	false	Enable pull-down refresh globally
onReachBottomDistance	Number	50	Distance from the bottom of the page when the pull-up event is triggered , Unit is px

stay app.json Found in file window To configure .
Such as ： Modify the title and background color of the navigation bar .

Turn on pull-down refresh

Pull down refresh is a proper term for mobile terminal , It refers to the pull-down and sliding operation of your finger on the screen , To reload page data .
stay window Under global configuration , take enablePullDownRefresh Property value changed to true that will do .

stay app.json After the pull-down refresh is enabled in, it will work on every page .

Set background color ：

Set up loading style ：
This can only be set to dark and light Two styles .

Set the pull-up distance to the bottom

Pull up to touch the bottom is a proper term for mobile terminal , Pull up and slide the screen with your fingers , So as to load more data .
The default distance is 50px, To reset , It's in app.json In the document window Item to configure .

Global configuration –tabBar

tabBar It is a common page effect in mobile applications , It is used to realize the fast switching of multiple pages . Small programs are usually divided into :

• Bottom tabBar
• Top tabBar

Be careful :

1. tabBar You can only configure least 2 individual 、 most 5 individual tab Tab .
2. When rendering top tabBar when , No display icon, Show only text .

tarBar Of 6 Components

backgroundColor: tabBar Background color of

selectedlconPath: The path of the selected image

borderStyle: tabBar The color of the top border

iconPath: Picture path when not selected

selectedColor : tab The color of the selected text on

color: tab The default of the text on （ Not selected ） Color

tarBar Configuration item of node

attribute	type	Required	The default value is	describe
position	String	no	bottom	tabBar The location of , Support only bottom/top
borderStyle	String	no	black	tabBar The color of the top border , Support only black/white
color	HexColor	no		tab The default of the text on （ Not selected ） Color
selectedColor	HexColor	no		tab The color of the selected text on
backgroundColor	HexColor	no		tabBar Background color of
list	Array	yes		least 2 individual 、 most 5 individual tabtab List of tabs .

Every tab Configuration item of item

stay app.json Added to window Flush tabBar Configuration item .
Among them, every tab Items have the following four attribute values .

attribute	type	Required	describe
pagePath	String	yes	Page path , The page must be in pages Predefined in
text	String	yes	tab Text displayed on
iconPath	String	no	Icon path when not selected ; When postion by top when , No display icon
selectedlconPath	String	no	Icon path when selected ; When postion by top when , No display icon