WeChat applet window navigation bar configuration (detailed example)

This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces the relevant content about the configuration of the windows navigation bar. The following will introduce in detail how to configure our window navigation bar. I hope everyone has to help.

[Related learning recommendations: 小program learning tutorial]

Introduce the application of our rpx in wxss and our application for small programs Configuration of program global styles and local styles, and then we will introduce in detail how to configure our window navigation bar.

• Introduction to rpx

  1. We have learned about px (resolution) in our previous HTML learning A unit is often used when we set up components, so what is the resolution unit we use in the WeChat applet? That is rpx, so what is so special about him that it is worth setting it up specifically?

  2. rpx is unique to the WeChat applet. It is a size unit that solves screen adaptation. It can be adapted according to the screen width, regardless of the size of the screen, and the screen is specified. The width is 750rpx. Set the size of elements and fonts through rpx. The applet can automatically adapt the conversion between rpx and px on screens of different sizes.

  <span style="font-size: 14px;">Specially in our WeChat applet development, we mentioned earlier that it is recommended to use iPhone 6 for development, because iPhone’s px =375, then our 2 rpx= 1 px</span>

• About global configuration and local configuration

  We have also introduced the global configuration and local configuration earlier. Interested friends can do some research in advance. one time! Below I will talk about the commonly used configuration items in global configuration!

1. Commonly used configuration items of global configuration

The old rules are first shown in a table.

Configuration item name	Function
pages	Storage path for storing all pages of the current mini program
window	Set the appearance of the mini program window
tabBar	Set the tabBar effect at the bottom of the mini program
style	Option to enable the new version of the component

• pages As we have introduced before, in order to display our list page, we changed the first path of pages to the path of our list, and then the page of our WeChat applet is displayed The contents of our list are

• window and tabBar. Let’s look at a picture next, which introduces the areas used by our configurations

• style We also showed you when we introduced button earlier. When we delete style, our component style becomes the old version

• Function diagram

  

## 2. Window navigation bar

The settings of our window navigation bar include the first two areas shown in the previous picture. Let's first introduce the common configuration items of our window node.

Attribute nameTypeDefault valueFunctionnavigationBarTitleTextstringWord stringNavigation bar title contentnavigationBarBackgroundColorHexcolor#000000Set the navigation bar background color (such as fluorescent yellow#ffa)navigationBarTextStylestringwhiteSet the color of the navigation bar title (only black and white) backgroundColorHexcolor#ffffffThe background color of the windowbackgroundTextStylestringdarkSet the style of drop-down loading to only support dark/lightenablePullDownRefreshBooleanfalseWhether to enable the drop-down globally RefreshonReachBottomDistanceNumber50Page pull-down event triggering threshold (distance from the bottom of the page in px )

All of our above settings are set in the window within app.json! ! ! Next, I will demonstrate navigationBarTitleText and drop-down related properties. You can try the remaining configuration items yourself!

2.1 navigationBarTitleText configuration item

Without further ado, let’s get started!

• Open app.json and find window

• In window we can see the following default configuration items

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
   },

• We can see that the navigationBarTitleText in the third line is the configuration of our navigation bar title content. The default is Weixin. For example, I changed it to "Pippi's Cabin"

  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black"
   },

• Effect display:

  

#2.2 Pull-down refresh configuration

About pull to refresh I believe you must use it frequently. For example, when we use the mobile phone and it freezes, then our habitual action is to pull the screen down, so that our page It will reload, so how do we implement the function?

• First open app.json, enter the window configuration, and turn on the drop-down function

    "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#ffa",
    "navigationBarTitleText": "皮皮的小屋",
    "navigationBarTextStyle":"black",
    "enablePullDownRefresh": true
   },

• In the last line we will set enablePullDownRefresh If it is true,

• will show the effect:

  

##This is it We have briefly introduced these configurations. When we try these configuration items ourselves, we need to pay attention to our onReachBottomDistance. Its pull-up to bottom means that when we usually refresh the shopping platform, when we refresh to the bottom When a certain distance is reached, the page will automatically refresh the following data. We set the automatic refresh position through onReachBottomDistance

[Related learning recommendations:

小program learning tutorial

】

The above is the detailed content of WeChat applet window navigation bar configuration (detailed example). For more information, please follow other related articles on the PHP Chinese website!