9、页面的生命周期函数

admin

swiper.wxml
<swiper current="{{currentindex}}"  class="movie_swiper" indicator-dots="true" previous-margin="50px" next-margin="50px">
  <swiper-item class="movie" wx:for="{{thismovie}}">
   <view class="container movie_card">
      <image class="movie_image" src="{{item.img}}"></image>
      <text >编号：{{index+1}}{{item.name}}</text>
      <text>{{item.desc}}</text>
      <text bindtap="f0" wx:if="{{index < thismovie.length - 1}}" class="return-button">返回</text>
      <text wx:if="{{item.tuijian}}">推荐</text>
    </view>
  </swiper-item>
</swiper>

swiper.js
Page({
  data: {
    thismovie: [{
      name: "我们都是中国人1",
      desc: "这是一个什么样的电影呢？",
      img: "/images/gbt1.jpg",
      tuijian:true
    },
    {
      name: "这也是一个电影2",
      desc: "我们都是中国人我们一起来看电影吧",
      img: "/images/gbt2.jpg",
      tuijian: false
    },
      {
        name: "这也是一个电影3",
        desc: "我们都是中国人我们一起来看电影吧",
        img: "/images/gbt3.jpg",
        tuijian: true
      },
      {
        name: "这也是一个电影4",
        desc: "我们都是中国人我们一起来看电影吧",
        img: "/images/gbt4.jpg",
        tuijian: true
      },
      {
        name: "这也是一个电影5",
        desc: "我们都是中国人我们一起来看电影吧",
        img: "/images/gbt5.jpg",
        tuijian: true
      }
    ],
    thisok: ["a", "b", "c"],
    currentindex:0
  },
  onLoad:function(options){
    this.setData({
      currentindex: this.data.thismovie.length - 2
    })
  },
  onShow:function(){

  },
  onReady:function(){

  },
  onHide:function(){

  },
  onUnload:function(){
   
  }
  
})onLoad 初始加载
onShow 页面每一次被显示的时候，它都要被调用一次，不仅是在初始加载之后 显示的时候被调有一次，每一次页面从隐藏状态变成显示可见的时候 它都要被调用一次
onReady 它是页面初如渲染完成 整个视图准备好了，已经可以交互的时候被调用一次
onHide
onUnload

swiper.wxss
.movie{
  display: flex;
  background-color: royalblue;
}
.movie_image{
  width: 400rpx;
  height: 400rpx;
}
.movie_swiper{
  height: 90vh;
}
.movie_card{
  height: 100%;
  width: 100%;
  background: #eee;
  margin: 0,50rpx;
  position: relative;/*相对定位*/
}
.return-button{
  position: absolute;/*绝对定位*/
  right: 5px;
  top: 10px;
  font-size: 24rpx;
  font-style: italic;
  border: 1px solid blue;
  border-radius: 10%;
  border-right: 5px;
}
文档：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%9E%E8%B0%83%E5%87%BD%E6%95%B0