页面导航
什么是页面导航
页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：
- <a> 链接
- location.href
小程序中实现页面导航的两种方式
- 声明式导航
- 在页面上声明一个
导航组件 - 通过点击
组件实现页面跳转
- 编程式导航
- 调用小程序的导航 API，实现页面的跳转
声明式导航
导航到 tabBar 页面
tabBar 页面指的是被配置为 tabBar 的页面。
在使用 <navigator> 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：
- url 表示要跳转的页面的地址，必须以 / 开头
- open-type 表示跳转的方式，必须为 switchTab
示例代码如下：
<navigator url='/pages/message/message' open-type='switchTab'>导航到消息页面</navigator>
导航到非 tabBar 页面
非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 <navigator> 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：
- url 表示要跳转的页面的地址，必须以 / 开头
- open-type 表示跳转的方式，必须为 navigate
示例代码如下：
<navigator url='/pages/info/info' open-type='navigate'>导航到info页面</navigator>
注意：为了简便，在导航到非 tabBar 页面时，open-type="navigate" 属性可以省略。
后退导航
如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
- open-type 的值必须是 navigateBack，表示要进行后退导航
- delta 的值必须是数字，表示要后退的层级
示例代码如下：
<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。
注意：这个后退导航只能作用于非tabbar页面，tabbar页面被认为是一级页面，不能再往后退了
编程式导航
导航到 tabBar 页面
调用 wx.switchTab(Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：
示例代码如下：
// 页面结构
<button bindtap="gotoMessage">跳转到消息页面</button>
// 通过编程式导航。跳转到 message 页面
gotoMessage() {
wx.switchTab({
url: '/pages/message/message'
})
}
导航到非 tabBar 页面
调用 wx.navigateTo(Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下：
示例代码如下：
// 页面结构
<button bindtap="gotoInfo">跳转到info页面</button>
// 通过编程式导航。跳转到 info 页面
gotoInfo() {
wx.navigateTo({
url: '/pages/info/info'
})
}
后退导航
调用 wx.navigateBack(Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：
示例代码如下：
// 页面结构
<button bindtap="gotoBack">后退</button>
// 通过编程式导航。后退到上一页面
gotoBack() {
wx.navigateBack()
}
注意：这个后退导航只能作用于非tabbar页面，tabbar页面被认为是一级页面，不能再往后退了
导航传参
声明式导航传参
navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
- 参数与路径之间使用 ? 分隔
- 参数键与参数值用 = 相连
- 不同参数用 & 分隔
代码示例如下：
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
编程式导航传参
调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：
// 页面结构
<button bindtap="gotoInfo2">跳转到info页面</button>
// 通过编程式导航，跳转到 info 页面，并携带参数
gotoInfo2() {
wx.navigateTo({
url: '/pages/info/info?name=ls&gender=男',
})
}
在 onl oad 中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onl oad 事件中直接获取到，示例代码如下
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// options 就是导航传递过来的参数对象
console.log(options);
},
页面事件
下拉刷新事件
什么是下拉刷新
下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。
启用下拉刷新
启用下拉刷新有两种方式：
- 全局开启下拉刷新
- 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true
- 局部开启下拉刷新
- 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。
配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中，通过 backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：
- backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
- backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light
监听页面的下拉刷新事件
在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。
例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1：
// 页面结构
<view>count值为：{{count}}</view>
<button bindtap="countAdd">+1</button>
// +1 按钮的点击事件处理函数
countAdd() {
this.setData({ count: this.data.count + 1 })
}
在触发页面的下拉刷新事件的时候，如果要把 count 的值重置为 0，示例代码如下：
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({ count: 0 })
}
停止下拉刷新的效果
当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的 loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下：
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
this.setData({ count: 0 })
wx.stopPullDownRefresh()
}
上拉触底事件
什么是上拉触底
上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。
监听页面的上拉触底事件
在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
console.log('触发了上拉触底事件')
}
注意：上拉触底操作 当前页面高度 必须大于 屏幕高度+滚动条距离页面底部的距离 ，否则是不会触发的
配置上拉触底距离
上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。
可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。
小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值。
上拉触底案例
案例效果展示
案例实现步骤
- 定义获取随机颜色的方法
- 在页面加载时获取初始数据
- 渲染 UI 结构并美化页面效果
- 在上拉触底时调用获取随机颜色的方法
- 添加 loading 提示效果
- 对上拉触底进行节流处理
步骤一：定义获取随机颜色的方法