Wechat applet_ 8. View and logic

The goal is :

• Can know how to realize the navigation jump between pages
• Can know how to achieve the pull-down refresh effect
• You can know how to pull up and load more effects
• Be able to know the life cycle functions commonly used in small programs

Logic and view

What is page navigation :

Page navigation refers to the jump between pages , for example : There are two ways to realize page navigation in the browser

1. link
2.location.href

There are two ways to realize page navigation in applet :

1. Declarative navigation :

• Declare a... On the page <navigatoe> Navigation components
• By clicking on <navigator> Component to realize page Jump

2. Programming navigation :

• Calling applet navigation API, Realize page Jump

Navigate to tabBar page :

tabBar A page refers to a page that is configured to tabBar The page of
In the use of <navigator> The component jumps to the specified tabBar When the page is , You need to specify the url Properties and open-type attribute , among :

• url Indicates the page address to jump to , Must be / start
• open-type Indicates how to jump , Must be switchTab
  The example code is as follows :

  <navigator url="/pages/message/message" open-type="switchTab"> Navigate to message Loop page </navigator>

• Be careful , here tabBar The configured page needs to be displayed in app.json Medium tabBar The page configured under the node will jump !

Navigate to non tabBar page :

Through non declarative navigation

Not tabBar A page is one that is not configured to tabBar The page of
In the use of <navigator> Component jump to non tabBar When the page is , You need to specify url Properties and open-type attribute , among :

• url Indicates the page address to jump to , Must be / start
• open-type Indicates how to jump , It has to be for navigator

The example code is as follows :

<navigator url="/pages/for/for" open-type="navigate"> Navigate to for Loop page </navigator>

there url Attributes only need to be in app.json Of pages The node can be configured

Be careful : For simplicity , Navigate to non tabBar When the page is ,open-type="navigate" Properties can be omitted

Back navigation :

If you want to go back to the previous page or multi-level page , You need to specify open-type and delta attribute , among :

• open-type The value of must be navigateBack, Indicates that you want to perform back navigation
• delta The value of must be a number , Indicates that you want to navigate backwards
  The sample code is as follows :

  <navigator open-type="navigateBack" delta="-1">
     Return to upper level 
  </navigator>