前言
小程序中如何实现页面之间的相互跳转呢?当数据较多的时候,又如何实现加载更多的效果呢,今天就来一起看一下小程序中是如何实现吧~
一、页面导航
1. 什么是页面导航?
页面导航指的是页面之间的相互跳转,例如,在浏览器中实现页面导航的方式有如下两种:
a
标签location.href
2. 实现页面导航的两种方式
声明式导航
-
在页面上声明一个
<navigator>
导航组件 -
通过点击
<navigator>
组件实现页面跳转
编程式导航
- 调用小程序的导航
API
,实现页面的跳转
3. 导航到tabBar页面
tabBar
页面指的是被配置为 tabBar
的页面
在使用 <navigator>
组件跳转到指定的 tabBar
页面时,需要指定 url
属性和 open-type
属性,其中:
url
表示要跳转的页面的地址
,必须以/
开头open-type
表示跳转的方式
,必须为switchTab
<navigator url="/pages/message/message" open-type='switchTab'>导航到消息页面</navigator>
复制代码
4. 导航到非 tabBar 页面
非 tabBar 页面
指的是没有被配置为 tabBar
的页面
在使用 <navigator>
组件跳转到普通的非 tabBar
页面时,则需要指定 url
属性和 open-type
属性,其中:
url
表示要跳转的页面的地址
,必须以/
开头open-type
表示跳转的方式
,必须为navigate
<navigator url="/pages/info/info" open-type='navigate'>导航到info页面</navigator>
复制代码
5. 后退导航-声明式
如果要后退到上一页面或多级页面,则需要指定 open-type
属性和 delta
属性,其中
open-type
的值必须是navigateBack
,表示要进行后退导航delta
的值必须是数字,表示要后退的层级
<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
复制代码
6. 后退导航 - 编程式
调用 wx.navigateBack(Object object)
方法,可以返回上一页面或多级页面。其中 Object
参数对象可选的属性列表如下:
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
delta | number | 1 | 否 | 返回的页面数,如果 delta 大于现有页面数,则返回到首页。 |
success | function | 否 | 接口调用成功的回调函数 | |
fail | function | 否 | 接口调用失败的回调函数 | |
complete | function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
代码如下(示例):
// 页面结构
<button bindtap="gotoBack">后退</button>
// 编程式导航,后退到上一个页面
gotoBack() {
wx.navigateBack()
}
复制代码
7. 声明式导航传参
navigator
组件的 url
属性用来指定将要跳转到的页面的路径。同时,路径的后面还可以携带参数
:
-
参数
与路径
之间使用?
分隔 -
参数键
与参数值
用=
相连 -
不同参数
用&
分隔
代码如下(示例):
<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>
复制代码
8. 编程式导航传参
调用 wx.navigateTo(Object object)
方法跳转页面时,也可以携带参数
代码如下(示例):
// 页面结构
<button bindtap="gotoInfo2">跳转到info页面</button>
// 通过编程式导航,跳转到info页面,并携带参数
gotoInfo2() {
wx.navigateTo({
url:'/pages/info/info?name=ls&gender=男'
})
}
复制代码
9. 在 onLoad 中接收导航参数
通过 声明式导航传参
或 编程式导航传参
所写携带的参数,可以直接在 onLoad
事件中直接获取到
/**
* 生命周期函数——监听页面加载
*/
onLoad: function(options) {
// options 就是导航传递过来的参数对象
console.log(options)
}
复制代码
二、页面事件 —— 下拉刷新
1. 什么是下拉刷新?
下拉刷新
是移动端的专有名词,指的是通过手指在屏幕上的下拉滑动操作,从而 重新加载页面数据
的行为
2. 启动下拉刷新的两种方式
-
全局开启下拉刷新 在
app.json
的window
节点中,将enablePullDownRefresh
设置为true
-
局部开启下拉刷新 在页面的
.json
配置文件中,将enablePullDownRefresh
设置为true
在实际开发中,推荐使用第 2 种方式,为需要的页面单独开启下拉刷新的效果
3. 配置下拉刷新窗口的样式
在全局或页面的 .json
配置文件中,通过 backgroundColor
和 backgroundTextStyle
来配置下拉刷新窗口的样式,其中
backgroundColor
用来配置下拉刷新窗口的背景颜色
,仅支持 16 进制的颜色值backgroundTextStyle
用来配置下拉刷新loading
的样式,仅支持dark
和light
4. 监听页面的下拉刷新事件
-
在页面的
.js
文件中,通过onPullDownRefresh()
函数即可监听当前页面的下拉刷新事件
案例1:
在页面的 wxml
中有如下的 UI
结构,点击按钮可以让 count
值自增 +1
代码如下(示例):
// 页面结构
<view>count值为:{{count}}</view>
<button bindtap="countAdd">+1</button>
// +1 按钮的点击事件处理函数
countAdd() {
this.setData({
count: this.data.count + 1
})
}
复制代码
案例2:
在触发页面的下拉刷新事件的时候,如果要把 count
的值重置为 0
代码如下(示例):
/**
* 页面相关事件处理函数——监听用户下拉动作
*/
onPullDownRefresh: function() {
this.setData({
count: 0
})
}
复制代码
5. 停止下拉刷新的效果
当处理完下拉刷新后,下拉刷新的 loading
效果会一直显示,不会主动消失
, 所以需要手动隐藏 loading
效果,此时,调用 wx.stopPullDownRefresh()
可以停止当前页面的上拉刷新
代码如下(示例):
/**
* 页面相关事件处理函数——监听用户下拉动作
*/
onPullDownRefresh: function() {
this.setData({
count: 0
})
}
// 当数据重置成功之后,调用此函数,关闭下拉刷新的效果
wx.stopPullDownRefresh()
复制代码
三、页面事件 —— 上拉触底
1. 什么是上拉触底?
上拉触底是移动端的专有名词,通过手指在屏幕上的上拉滑动操作,从而加载更多数据的行为
2. 监听页面上拉触底事件
在页面的 .js
文件中,通过 onReachBottom
函数即可监听当前页面上的上拉触底事件
代码如下(示例):
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function() {
console.log('触发了上拉触底的事件')
}
复制代码
3. 配置上拉触底距离
- 上拉触底距离指的是
触发上拉触底事件时,滚动条距离页面底部的距离
- 可以在全局或页面的
.json
配置文件中,通过onReachBottomDistance
属性来配置上拉触底的距离 - 小程序默认的触底距离是
50px
,在实际开发中,可以根据自己的需求修改这个默认值
总结
The secret of success is constancy of purpose.