Page navigation of wechat applet

Catalog

One 、 Page navigation

Two 、 Page Events

3、 ... and 、WXS Script

One 、 Page navigation

There are two ways to realize page navigation ： Declarative navigation and programmatic navigation

Declarative navigation ：

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

Programming navigation ：

• Calling applet navigation API, Realize page Jump

contrast ：

Navigation parameters

type	chart	explain
Declarative navigation		Use... Between parameters and paths ? Separate   Parameter key and parameter value = Connected to a   Use... For different parameters & Separate
Programming navigation		call wx.navigateTo(Object object) Method to jump to the page , You can also carry parameters

Two 、 Page Events

①  Drop down refresh event ： Reload page data

1. On page .json In profile

• take enablePullDownRefresh Set to true
• backgroundColor Used to configure the background color of the drop-down refresh window , Support only 16 The color value of base
• backgroundTextStyle Used to configure pull-down refresh loading The style of , Support only dark and light

2. On page .js In file , Set manually hidden drop-down refresh loading effect

adopt onPullDownRefresh() Function to listen to the pull-down refresh event of the current page .

here , call wx.stopPullDownRefresh() You can stop the pull-down refresh of the current page . The sample code is as follows ： 

 ②  Pull up bottoming Events ： Load more data

1. On page .js In file  

adopt onReachBottom() Function to listen to the pull-up bottom event of the current page . The sample code is as follows ：

 2. On page .json In profile , Configure the pull-up bottom touch distance

adopt onReachBottomDistance Property to configure the distance of pulling up to the bottom .

The default bottom distance is 50px

3、 ... and 、WXS Script

wxml Cannot call in the page .js The function defined in , however ,wxml Can be called wxs The function defined in . therefore , Small program wxs A typical application scenario is “ filter ”.

①  Embedded wxs Script

wxml Every... In the document <wxs></wxs> label , You must provide module attribute , Used to specify the current wxs Module name of , Convenient in wxml Access the members in the module ：

②  Extraneous wxs Script

stay wxml Introduce outreach in wxs Script time , It has to be for <wxs> add module and src attribute , among ：  module Used to specify the name of the module  src Used to specify the path of the script to be imported , And it has to be a relative path The sample code is as follows ：

wxs The code can also be written in .wxs The suffix for the file inside , It's like javascript The code can be written in .js It is the same as in the file with suffix name . The sample code is as follows ：