uni-app生命周期

uni-app 生命周期分为应用生命周期和页面生命周期，后期用得比较多的是页面生命周期。

应用生命周期

应用生命周期只能在 App.vue 中监听，在其他页面无效。打开 App.vue，默认有 3 个生命周期函数，代码如下。

export default {
  // 应用生命周期
  // 项目初始化完成执行
  // 只运行一次
  onLaunch: function() {
    console.log('项目初始化完成')
  },
  // 打开项目时执行
  onShow: function() {
    console.log('打开项目')
  },
  // 关闭项目时执行
  onHide: function() {
    console.log('关闭项目')
  }
}

运行程序，打开控制台，会发现 onLaunch 只运行一次，onShow 和 onHide 只要切换前后台就可以触发，可观看视频中的演示效果。

页面生命周期

uni-app 提供了大量的页面生命周期函数，不过项目中经常用到的也不过是其中的某几个，本节先看一个比较重要的，即页面生命周期函数 onLoad()。

onLoad 用于监听页面加载，其参数是上一个页面传递的参数。这个生命周期函数比较重要，它有两个作用。

在 onLoad 中调用数据接口，获取服务器端数据。
接收上一个页面传递的参数。

因为还没有讲解接口调用，此处无法做案例演示，等讲解接口调用之后，我们再演示 onLoad 案例。

下拉刷新生命周期函数

在 uni-app 页面生命周期函数中，上拉加载功能和下拉刷新功能也是非常实用的，先看下拉刷新功能的使用。

onPullDownRefresh：监听用户下拉动作，用于下拉刷新。

案例：循环遍历数组，下拉刷新修改数组顺序，代码如下。

<template>
  <view class="content">
    <view class="" v-for="(item, i) in newsList" :key="i">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 1．定义数组
      newsList: ['新闻1', '新闻2', '新闻3']
    }
  },
  onLoad() {
  },
  // 3．和onLoad平级，下拉刷新周期函数
  onPullDownRefresh() {
    console.log('下拉刷新')
    this.newsList = ['新闻3', '新闻2', '新闻1']
    // 注意：完成数据刷新后，需要停止刷新
    uni.stopPullDownRefresh()
  },
  methods: {}
}
</script>

代码解析如下。

单击按钮触发下拉刷新的方法是 uni.startPullDownRefresh() 。

上拉加载生命周期函数

上拉加载是指当页面滚动条到达底部时，触发 onReachBottom 生命周期函数，实现数据加载，案例代码如下。

<template>
  <view class="content">
    <view class="main" v-for="(item, i) in newsList" :key="i">
      {{ item }}
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 1．定义数组，增加数据时页面产生滚动条
      newsList: ['新闻1', '新闻2', '新闻3', '新闻1', '新闻2', '新闻3', '新闻1', '新闻2', '新闻3']
    }
  },
  onLoad() {
  },
  // 3．下拉加载生命周期
  onReachBottom() {
    console.log('页面触底')
    // 每次到达底部都会加载这两条假数据
    this.newsList = [...this.newsList, ...['新闻4', '新闻5']]
  },
  methods: {}
}
</script>

代码解析如下。

上拉加载的周期函数是 onReachBottom，当滚动条到达底部时触发。