1.0 页面导航
1. 什么是页面导航
页面导航指的是页面之间的相互跳转。例如,浏览器中实现页面导航的方式有如下两种:
① <a> 链接
② location.href
1.1 小程序中实现页面导航的两种方式
- 声明式导航
在页面上声明一个 导航组件
通过点击 组件实现页面跳转 - 编程式导航
调用小程序的导航 API,实现页面的跳转
1.2 页面导航 - 声明式导航
1. 导航到 tabBar 页面
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中:
- url 表示要跳转的页面的地址,必须以 / 开头
- open-type 表示跳转的方式,必须为 switchTab
<navigator url="/pages/my/my" open-type="switchTab">导航到 my 页面</navigator>
2. 导航到非 tabBar 页面
非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 <navigator> 组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中:
- url 表示要跳转的页面的地址,必须以 / 开头
- open-type 表示跳转的方式,必须为 navigate
注意:为了简便,在导航到非 tabBar 页面时,open-type=“navigate” 属性可以省略。
<navigator url="/pages/info/info" open-type="navigate">导航到 非 tabBar 页面</navigator>
open-type 默认 等于 navigate 所以 可以省略不写
3. 后退导航
如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:
- open-type 的值必须是 navigateBack,表示要进行后退导航
- delta 的值必须是数字,表示要后退的层级
<navigator open-type="navigateBack" delta="1">返回上一页</navigator>
注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。
1.3 页面导航 - 编程式导航
1. 导航到 tabBar 页面
调用 wx.switchTab(Object object) 方法,可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下:
属性 类型 是否必选 说明
url string 是 需要跳转的 tabBar 页面的路径,路径后不能带参数
success function 否 接口调用成功的回调函数
fail function 否 接口调用失败的回调函数
complete function 否 接口调用结束的回调函数(调用成功、失败都会执行)
示例
<!-- 页面结构 -->
<button bindtap="gotoMessage">跳转到消息页面</button>
// js文件中 通过编程市导航,跳转到 message 页面
gotoMessage() {
wx.switchTab({
url: '/pages/message/message',
})
},
2. 导航到非 tabBar 页面
调用 wx.navigateTo(Object object) 方法,可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表 与 上面的一样
示例
<!-- 页面结构 -->
<button bindtap="gotoInfo">跳转到 info 页面</button>
// js文件中 通过编程市导航,跳转到 message 页面
gotoMessage() {
wx.navigateTo({
url: '/pages/info/info',
})
},
3. 后退导航
调用 wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。其中 Object 参数对象可选的,属性列表如下:
- delta 默认为1 ,可以不填, 返回的页面数,如果 delta 大于现有页面数,则返回到首页
- 其余三个和上方一样
示例
<!-- 页面结构 -->
<button bindtap="gotoBack">跳转到 info 页面</button>
// js文件中 通过编程市导航,跳转到 message 页面
gotoBack() {
wx.navigateBack()
},
1.4 页面导航 - 导航传参
1. 声明式导航传参
navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数
- 参数与路径之间使用 ? 分隔
- 参数键与参数值用 = 相连
- 不同参数用 & 分隔
<navigator url="/pages/info/info?name=zs&age=20">跳转到 info 页面</navigator>
2. 编程式导航传参
调用 wx.navigateTo(Object object) 方法跳转页面时,也可以携带参数,代码示例如下:
<!-- 页面结构 -->
<button bindtap="gotoInfo2"> 跳转到 info 页面</button>
// 通过编程式导航, 跳转到 info 页面,并携带参数
gotoInfo2() {
wx.navigateTo({
url: '/pages/info/info?name=ls&gender=男'
})
}
3. 在 onLoad 中接收导航参数
通过 声明式导航传参或编程式导航传参所携带的参数,可以直接在 onLoad 事件中直接获取到,示例代码如下:
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// options 就是导航传递过来的参数对象
console.log(options)
},
2.0 页面事件 - 下拉刷新事件
- 下拉刷新是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而重新加载页面数据的行为。
2.1 启用下拉刷新
启用下拉刷新有两种方式:
- 全局开启下拉刷新
在 app.json 的 window 节点中,将 enablePullDownRefresh 设置为 true - 局部开启下拉刷新
在页面的 .json 配置文件中,将 enablePullDownRefresh 设置为 true
在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效果。
2.2 配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中,通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式,其中:
- backgroundColor 用来配置下拉刷新窗口的背景颜色,仅支持16 进制的颜色值
- backgroundTextStyle 用来配置下拉刷新 loading 的样式,仅支持 dark 和 light
2.3 监听页面的下拉刷新事件
- 在页面的 .js 文件中,通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
在触发页面的下拉刷新事件的时候,如果要把 count 的值重置为 0,示例代码如下
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
<