preface

How to realize the page in the small program jump to each other? When more data, and how to load more effect, today to take a look at the small program is how to achieve it ~

First, page navigation

1. What is page navigation?

Page navigation refers to skipping between pages. For example, in a browser, you can navigate to a page in either of the following ways:

  • aThe label
  • location.href

2. Two ways to achieve page navigation

Declarative navigation

  • Declare a < Navigator > navigation component on the page

  • Jump to the page by clicking on the
    component

Programmatic navigation

  • Call the navigation of the appletAPI, realize the page jump

3. Navigate to tabBar

TabBar pages refer to pages that are configured as tabBar

When using the < Navigator > component to jump to the specified tabBar page, you need to specify the URL property and the open-type property, where:

  • urlIndicates to jumpPage address, have to/At the beginning
  • open-typesaidWay to jumpThat must beswitchTab
<navigator url="/pages/message/message" open-type='switchTab'>Navigate to the message page</navigator>
Copy the code

4. Navigate to a non-Tabbar page

Non-tabbar pages are pages that are not configured as tabBar

When using the < Navigator > component to jump to a normal non-Tabbar page, you need to specify the URL property and the open-type property, where:

  • urlIndicates to jumpPage address, have to/At the beginning
  • open-typesaidWay to jumpThat must benavigate
<navigator url="/pages/info/info" open-type='navigate'>Navigate to the INFO page</navigator>
Copy the code

5. Backward navigation – declarative

If you want to move back to a previous page or multi-level page, you need to specify the open-type attribute and delta attribute, where

  • open-typeMust benavigateBack“Indicates that you want to navigate backwards
  • deltaThe value of must be a number, indicating the level to be backed up
<navigator open-type='navigateBack' delta='1'>Return to previous page</navigator>
Copy the code

6. Backward navigation – programming

NavigateBack (Object Object) to return to the previous page or multi-level page. The list of optional attributes of Object is as follows:

attribute type The default value mandatory instructions
delta number 1 no Number of pages returned, if delta is greater than the number of existing pages, return to the home page.
success function no The interface called the callback function successfully
fail function no Interface failed to invoke the callback function
complete function no Callback function at the end of an interface call (executed on success and failure)

The code is as follows (example) :

<button bindtap="gotoBack"</button> // Navigate programmatically back to previous pagegotoBack() {
  wx.navigateBack()
}
Copy the code

7. Declarative navigation parameter transmission

The URL property of the Navigator component is used to specify the path to the page to jump to. At the same time, the path can be followed by parameters:

  • Between parameters and paths? separated

  • Parameter keys are connected to parameter values with =

  • Different parameters are separated by &

The code is as follows (example) :

<navigator url="/pages/info/info? name=zs&age=20">The INFO page is displayed</navigator>
Copy the code

8. Programmatic navigation and parameter transfer

NavigateTo (Object Object) can also be used to navigateTo a page

The code is as follows (example) :

<button bindtap="gotoInfo2"> Jump to info page </button> // Navigate programmatically to info page with parametersgotoInfo2() {
  wx.navigateTo({
	url:'/pages/info/info? Name = ls&gender = man '})}Copy the code

9. Receive navigation parameters in onLoad

Parameters written to declarative or programmatic navigational parameters can be retrieved directly from the onLoad event

/** * lifecycle function -- listens for page loading */
onLoad: function(options) {
  // Options is the parameter object passed by the navigation
  console.log(options)
}
Copy the code

Page events — pull down refresh

1. What is drop-down refresh?

Pull-down refresh is a mobile term that refers to the act of reloading data on a page by swiping your finger down the screen

2. Enable the drop-down refresh in two ways

  • In the window node of app.json, set enablePullDownRefresh to true

  • In the. Json configuration file on the page, set enablePullDownRefresh to true

In real development, it is recommended to use the second option, to enable a separate drop-down refresh effect for the desired page

3. Configure the style of the drop-down refresh window

In the.json configuration file of the global or page, configure the style of the drop-down refresh window by backgroundColor and backgroundTextStyle, where

  • backgroundColorUsed to configure the drop-down refreshWindow background colorOnly hexadecimal color values are supported
  • backgroundTextStyleUsed to configure the drop-down refreshloadingThe style is supported onlydark 和 light

4. Listen for the drop-down refresh event of the page

  • In the.js file of the page, the onPullDownRefresh() function listens for the pull-down refresh event of the current page

Case 1: In the WXML of the page, there is the following UI structure: click the button to increment the count value by +1

The code is as follows (example) :

{{count}}</view> <button bindtap="countAdd">+1</button> // +1 button click event handlercountAdd() {
  this.setData({
    count: this.data.count + 1
  })
}
Copy the code

Case 2: Reset the value of count to 0 when the page pull-down refresh event is triggered

The code is as follows (example) :

/** * page-related event handlers -- listen for user pull actions */
onPullDownRefresh: function() {
  this.setData({
	count: 0})}Copy the code

5. Stop the drop-down refresh effect

After the pull-down refresh is processed, the loading effect of the pull-down refresh is always displayed and will not disappear automatically. Therefore, you need to manually hide the loading effect. In this case, you can call wx.stoppulldownRefresh () to stop the pull-up refresh of the current page

The code is as follows (example) :

/** * page-related event handlers -- listen for user pull actions */
onPullDownRefresh: function() {
  this.setData({
	count: 0})}// This function is called to turn off the pull-down refresh effect after the data reset is successful
wx.stopPullDownRefresh()
Copy the code

Page events — pull up and hit bottom

1. What is pull-up bottoming?

Pull-down is a term for mobile, the act of loading more data by pulling and sliding your finger up and down the screen

2. Listen for the bottom pull event on the page

In the.js file of the page, the onReachBottom function listens for pull-up events on the current page

The code is as follows (example) :

/** * the handler for the pull-down event on the page */
onReachBottom: function() {
  console.log('Triggered a pull-up bottoming event')}Copy the code

3. Set the distance between the pull-up and the bottom touch

  • The pull-up distance to the bottom isThe distance between the scroll bar and the bottom of the page when the pull-up hit bottom event is triggered
  • Can be global or page.jsonIn the configuration file, passonReachBottomDistanceProperty to configure the distance to the bottom of the pull-up
  • The default bottom distance for applets is50pxIn actual development, you can change the default value to suit your needs

conclusion

The secret of success is constancy of purpose.