声明式导航

跳转tabBar

navigator标签，必须指定open-type值switchTab

1
<navigator url='' open-type="switchTab">导航</navigator>

跳转非tabBar

navigator标签，可以指定open-type值navigate

实现后退效果

open-type值navigateBack，默认delta值为1，如果只是后退一页可以不用设置delta。

编程时导航

通过调用API实现跳转

路由方式 触发时机 路由前页面 路由后页面
初始化 小程序打开的第一个页面 onLoad, onShow
打开新页面 调用 API wx.navigateTo 使用组件 <navigator open-type="navigateTo"/> onHide onLoad, onShow
页面重定向 调用 API wx.redirectTo 使用组件 <navigator open-type="redirectTo"/> onUnload onLoad, onShow
页面返回 调用 API wx.navigateBack 使用组件<navigator open-type="navigateBack"/> 用户按左上角返回按钮 onUnload onShow
Tab 切换 调用 API wx.switchTab 使用组件 <navigator open-type="switchTab"/> 用户切换 Tab 各种情况请参考下表
重启动 调用 API wx.reLaunch 使用组件 <navigator open-type="reLaunch"/> onUnload onLoad, onShow

导航传参

  1. 声明式导航：使用url+?的形式传参，多个参数使用&连接
  2. 编程时导航：同上

接受参数

在.js的onLoad事件中接收，options形参的值为传递的值

页面事件

下拉刷新

启用效果，全局和局部开启“enablePullDownRefresh”

配置下拉刷新样式

  • backgroundColor：16进制颜色，配置背景色
  • backgroundTextStyle：有效值只有dark和light，配置下拉加载样式

停止下拉刷新

在onPullDownRefresh()函数中调用停止方法

1
2
3
 onPullDownRefresh() {
wx.stopPullDownRefresh()
 },

上拉触底

用于分页，可以通过配置onReachBottomDistance属性来设置滚动条距离底部多少距离触发上拉触底事件，默认为50px（px被省略）

上拉触底加载新数据

如何设置下拉刷新加载新的一页数据？

1
2
3
4
5
6
7
8
9
getMissionList(){
  wx.request({
    url: 'https://mock.apifox.cn/m1/1897625-0-default/missionlist',
      method:'GET',
      success:(res)=>{
        console.log(res.data.missionlist),
        this.setData({missionlist:[...this.data.missionlist,...res.data.missionlist]})
      }
  })

注：在setData方法中使用...表示将数组展开。这里是将旧数组和新数组进行展开后拼接。

在发请求前添加Loading效果，加载完毕后隐藏

1
2
3
4
5
6
7
wx.showLoading({
	title: '数据加载中...'
})
//隐藏,在complete箭头函数里写
complete:()=>{
	wx.hideLoading()
}

节流操作

阻止多次下拉导致产生多组数据

  1. 在data中定义isloading节流阀
  • isloading为布尔值，
    • true为正在进行请求
    • false为没有正在进行的请求
  1. 在请求数据的方法中修改isloading节流阀的值
  • 如调用getMissionList()请求数据时修改节流阀值为true
  • 在数据请求结束后，在complete回调函数中，重置节流阀为false
  1. 在onReachBottom中判断节流阀的值，从而对数据请求进行节流控制
  • 判断节流阀值
    • 若true，则阻止当前请求
    • 若false，则发起数据请求