【WeChat 小程序】007 - 按钮设置以及页面的生命周期函数

按钮设置

1. 使用text元素显示出按钮并绑定点击事件处理函数f0

通过设置text元素的bindtap属性绑定函数
示例代码（wxml）：

<text bindtap="f0" wx:if="{{index < (weeklyMovieList.length - 1)}}" class="return-button">返回本周</text>

2. 规定按钮的样式

示例代码（wxss）：

.button{
  position: absolute;
  right: 10rpx;
  top: 80rpx;
  font-size: 30rpx;
  color: lightcoral;
  border:1px solid coral;
  border-radius: 20%;
}

事件处理函数

1. 在页面逻辑文件中的Page函数中设置

  f0: function(event){
    this.setData({
      currentIndex: this.data.weeklyMovieList.length-1
    })
  }

页面生命周期函数

可以理解为是一种特殊的事件处理函数

1. onLoad

• 在页面逻辑文件中的Page函数中设置
• 只在页面初始化时被调用一次
• 示例代码

onLoad: function(options){
  this.setData({
    currentIndex: this.data.weeklyMovieList.length-1
  })
}

注： 要用this.setData({})来对内部状态变量进行赋值的操作，这样才能同步更新视图

2. onShow

• 在页面逻辑文件中的Page函数中设置
• 在每次页面加载时被调用

3. onReady

• 在页面逻辑文件中的Page函数中设置
• 当页面初始化加载完成，准备好交互时被调用

4. onHide

• 在页面逻辑文件中的Page函数中设置
• 在每次页面隐藏时被调用

4. onUnload

• 在页面逻辑文件中的Page函数中设置
• 当页面被关闭或者被卸载时被调用

原文：https://www.cnblogs.com/codaland/p/12632496.html