微信小程序的页面导航

一、页面导航

二、页面事件

三、WXS 脚本

一、页面导航

实现页面导航的两种方式：声明式导航和编程式导航

声明式导航：

在页面上声明一个 <navigator> 导航组件
通过点击 <navigator> 组件实现页面跳转

编程式导航：

调用小程序的导航 API，实现页面的跳转

对比：

类型

导航到 tabBar 页面

导航到非 tabBar 页面

后退导航

声明式导航

url:必须以 / 开头

open-type="switchTab"

url:必须以 / 开头

open-type="navigate"（可省略）

open-type 的值必须navigateBack

delta 必须是数字,表示后退的层级（默认为1）不能后退到tabBar

编程式导航

url路径后不能带参数

url路径后可以带参数

可以后退到tabBar

导航传参

类型	图	说明
声明式导航		参数与路径之间使用 ? 分隔参数键与参数值用 = 相连不同参数用 & 分隔
编程式导航		调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数

二、页面事件

① 下拉刷新事件：重新加载页面数据

1.在页面的 .json 配置文件中

将 enablePullDownRefresh 设置为 true

backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值

backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

属性名	类型	默认值	说明
backgroundColor	HexColor	#ffffff	窗口的背景色
backgroundTextStyle	String	dark	下拉 loading 的样式，仅支持 dark / light
enablePullDownRefresh	Boolean	false	是否全局开启下拉刷新

2.在页面的 .js 文件中，设置手动隐藏下拉刷新的 loading 效果

通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下：

② 上拉触底事件：加载更多数据

1.在页面的 .js 文件中

通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：

2.在页面的 .json 配置文件中，配置上拉触底距离

通过 onReachBottomDistance 属性来配置上拉触底的距离。

默认的触底距离是 50px

属性	类型	默认值	说明
onReachBottomDistance	Number	50	页面上拉触底事件触发时距页面底部距离，单位为px

三、WXS 脚本

wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中 wxs 的典型应用场景就是“过滤器”。

① 内嵌 wxs 脚本

wxml 文件中的每个 <wxs></wxs> 标签，必须提供 module 属性，用来指定当前 wxs 的模块名称，方便在 wxml 中访问模块中的成员：

② 外联的 wxs 脚本

在 wxml 中引入外联的 wxs 脚本时，必须为 <wxs> 标签添加 module 和 src 属性，其中： module 用来指定模块的名称 src 用来指定要引入的脚本的路径，且必须是相对路径示例代码如下：

wxs 代码还可以编写在以 .wxs 为后缀名的文件内，就像 javascript 代码可以编写在以 .js 为后缀名的文件中一样。示例代码如下：

微信小程序的页面导航相关推荐

【微信小程序】页面导航
目录小程序 - 视图与逻辑页面导航 1. 什么是页面导航 2. 小程序中实现页面导航的两种方式页面导航 - 声明式导航 1. 导航到 tabBar 页面 2. 导航到非 tabBar 页面 3. ...
（微信小程序）页面导航
我是表哥Harker,表妹我来咯~ 今天介绍小程序是如何进行页面导航,页面分两种,一种不是TabBar 页面,一种是TabBar页面声明式导航 1.导航到非 `tabBar` 页面非 `tabBa ...
微信小程序隐藏页面导航栏左上角的小房子
描述:隐藏页面导航栏左上角的小房子解决办法: onShow(){wx.hideHomeButton(); }, 在当前页面的onshow方法里面写上wx.hideHomeButton();来隐藏小房 ...
【微信小程序】-- 页面导航 -- 编程式导航（二十三）
【微信小程序】页面导航详解
微信小程序界面从右边滑出_微信小程序MUI侧滑导航菜单示例(Popup弹出式,左侧不动，右侧滑动)...
本文实例讲述了微信小程序MUI侧滑导航菜单.分享给大家供大家参考,具体如下: 实现的目标--YDUI的Popup组件点击列表图标--左侧的菜单栏显示--点击关闭按钮或者右侧的遮罩层--左侧菜单栏关闭 ...
微信小程序-自定义底部导航
代码地址如下: http://www.demodashi.com/demo/14258.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序自定义顶部导航栏标题 navigationStyle
微信小程序自定义顶部导航栏标题单页面自定义导航栏修改需要自定义的页面,的页面配置.json文件全部页面自定义导航修改公共页面配置app.json 单页面自定义导航栏修改需要自定义的页面,的 ...
微信小程序制作顶部导航栏
1问题描述使用微信小程序开发者工具制作顶部导航栏. 2算法描述首先就是对微信小程序开发者工具的配置,官网搜索后进入,选择稳定版,Windows64位下载. 然后点开开发者工具,选择小程序,点击图片 ...

微信小程序的页面导航

一、页面导航

二、页面事件

三、WXS 脚本

微信小程序的页面导航相关推荐

最新文章

热门文章