微信小程序第三天

页面导航

声明式导航
编程式导航：调用小程序的导航API，实现页面的跳转

声明式导航：导航到tabBar页面

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

声明式导航：跳转到非tabBar页面

<navigator url="/pages/test/test" open-type="navigate">跳转到test页面</navigator>

<navigator url="/pages/test/test">跳转到test页面</navigator>

声明式导航：后退导航

<navigator open-type="navigateBack" delta="1">后退</navigator>
<navigator open-type="navigateBack">后退</navigator>

编程式导航：导航到tabBar页面
wx.switchTab()

<button bindtap="gotoMessage">跳转到message页面</button>

  gotoMessage() {
   
    wx.switchTab({
   
      url: '/pages/message/message',
    })
  },

编程式导航： 导航到非tabBar页面
wx.navigateTo(Object object)

编程式导航： 后退导航
wx.navigateBack(Object object)

导航传参

声明式导航传参：

<navigator url="/pages/test/test?name=zs&age=20" open-type="navigate">跳转到test页面</navigator>

编程式导航传参：

<navigator bindtap="gotoInfo">跳转到info页面</navigator>

gotoInfo() {
   
    wx.navigateTo({
   
      url: '/pages/info/info?name=ls&age=55',
    })
  },

在onLoad中接收导航参数
通过声明式导航传参或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到：

onLoad(options) {
   
    this.getInfo()
    this.setData({
   
      query: options
    })
  },

页面事件

下拉刷新

下拉刷新
.json文件中配置：
enablePullDownRefresh boolean false 是否开启当前页面下拉刷新。
配置下拉刷新窗口样式：
backgroundColor
backgroundTextStyle

监听页面的下拉刷新事件
.js中有onPullDowRefresh函数
使用： 下拉刷新将某个数字重置
在onPullDownRefresh中设置一下。
wx.startPullDownRefresh 开始下拉刷新
wx.stopPullDownRefresh 停止当前页面下拉刷新

上拉触底

上拉触底
onReachBottom
在全局或者页面的.json配置文件中，通过onReachBottomDistance属性来配置上拉触底的距离。

上拉触底案例

实现步骤：

1. 定义获取随机颜色的方法
2. 在页面加载时获取初识数据
3. 渲染UI结构并美化页面效果
4. 在上拉触底时调用获取随机颜色的方法
5. 添加loading提示效果
6. 对上拉触底进行节流处理

实现效果以及代码
获取随机颜色的的方法

data: {
   
    colorList: []  //随机颜色的列表
  },

  getColors(){
   
    wx.request({
   
      url: 'https://www.escook.cn/api/color',
      method: 'GET',
      success: ({
    data: res}) => {
   
        // console.log(res.data)
        this.setData( {
   
          colorList: [...this.data.colorList, ...res.data]
        })
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   
    this.getColors()
  },

渲染UI结构并美化页面效果

<!--pages/contact/contact.wxml-->
<view wx:for="{
    {colorList}}" wx:key="index" class="item" style="background-color: rgba({
       {
       item}});">
  {
  { item }}
</view>

/* pages/contact/contact.wxss */

.item {
   
  width: 80%;
  height: 200rpx;
  line-height: 200rpx;
  text-align: center;
  margin: 60rpx auto;
}

在上拉触底时调用获取随机颜色的方法

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom(