黑马程序员微信小程序学习总结6.页面导航，下拉刷新和上拉触底

页面导航

声明式导航

导航到tabBar页面

例子：

导航到非tabBar页面

后退导航

传参

注意：此方法只能用于非tabBar页面
如果tabBar页面使用，option会为空。因为switchTab会导致页面跳转到指定的页面并切换至底部的选项卡（tabBar），并且会清除页面栈中的所有页面，这意味着页面的生命周期函数onLoad不会被触发，因为页面并没有实际被销毁和重新加载。可以通过事件传递和全局变量的方式传参

页面取参：

编程式导航

导航到tabBar页面

导航到非tabBar页面

后退导航

传参

取参数：

获取后可以放到页面的data数据中以便其他地方使用

下拉刷新进阶

配置下拉刷新

例子：
wxml：

<!--pages/dropdownRefresh/dropdownRefresh.wxml-->
<view>请下拉刷新，count重新置为{{count}}</view>
<button type="primary" bind:tap="addCount">count加1</button>

页面js文件：

  onPullDownRefresh() {
    this.setData({
      count: 0
    })
  },

注意：重新编译后才好使，并且此方法在手机端不会自动弹回

设置弹回：
在onPullDownRefresh() 里最后调用wx.stopPullDownRefresh()

上拉触底进阶

上拉触底后，会执行

注意：会反复触发，所以要请求完成以后再触发，不然会触发多次请求

配置上拉触底距离

样例：获取随机颜色列表

注意：教程中的后端接口已无用

案例的实现步骤

js

其中，请求返回值的数据为长度为10的字符串数组：

再放入onLoad

在触底时间函数中再次调用

…为三点扩展运算符。this.data.colorList 是一个数组， res.data 也是一个数组，那么 … 符号表示展开运算符（spread operator），它的作用是将数组或类数组对象展开为一系列值。这行代码的意思是将 res.data 数组中的元素添加到 this.data.colorList 数组的末尾。

举个例子，如果 this.data.colorList 包含 [1, 2, 3]，而 res.data 包含 [4, 5, 6]，那么执行 colorList: […this.data.colorList, …res.data] 后，this.data.colorList 将变成 [1, 2, 3, 4, 5, 6]。

wxml和wxss

打开loading提示效果

在加载请求前调用showLoading即可
在关闭请求时调用hideLoading

showLoading中的参数：

数据截流（目前不需要设置了24/02/11）

截留步骤