当前位置：网站首页>Page navigation of wechat applet

Page navigation of wechat applet

2022-07-19 05:38:00 【One finger quicksand Q】

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 ：

type

Navigate to tabBar page

Navigate to non tabBar page

Back navigation

Declarative navigation

url: Must be / start

open-type="switchTab"

url: Must be / start

open-type="navigate"（ Omission ）

open-type The value must be navigateBack

delta It has to be numbers , Indicates the level of retreat （ The default is 1） Cannot back to tabBar

Programming navigation

url The path cannot be followed by parameters

url The path can be followed by parameters

Can go back to tabBar

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

Property name	type	The default value is	explain
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

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

attribute	type	The default value is	explain
onReachBottomDistance	Number	50	Distance from the bottom of the page when the pull-up event is triggered , Unit is px

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 ：