【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函数中设置
  • 当页面被关闭或者被卸载时被调用

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

上一篇:【WeChat 小程序】006 - 使用swiper组件实现幻灯片轮播


下一篇:没有经验三天开发一个Android app(第三天)