小程序入门学习05--幻灯片、页面生命周期

幻灯片
swiper

<view class=''>
<!-- swiper幻灯片轮播  默认生成像素150px,image为240 -->
<!-- indicator-dots='{{true}}'显示面板指示 -->
  <swiper class='movie-swiper' indicator-dots='{{true}}'
  previous-margin='50rpx' next-margin='50rpx'>
    <swiper-item class='movie' wx:for="{{weeklyMovieList}}">
      <view class='container movie-card'>
        <image class='movie-image'src='{{item.imagePath}}'></image>
        <!-- index:item下标 -->
          <text>第{{index+1}}周:{{item.name}}</text>
          <text>点评：{{item.comment}}</text>
          <text wx:if="{{item.isHighlyRecommended}}" 
          style="font-size:16px;color:red;">强烈推荐</text>
      </view>
    </swiper-item>
  </swiper>
</view>

.movie-card {
  height:100%;
  width:100%;
  margin:0 20rpx;
}

<!-- current 幻灯片默认页面，默认为0 -->
<swiper class='movie-swiper' indicator-dots='{{true}}'
  previous-margin='50rpx' next-margin='50rpx' current='{{weeklyMovieList.length - 1}}'>
    <swiper-item class='movie' wx:for="{{weeklyMovieList}}">

页面生命周期

// onLoad初始化（第一步），在初始化时将currentIndex（已在js中定义）的值赋为最为一页所对应的
  onLoad: function(options) {
    this.setData({
      currentIndex:this.data.weeklyMovieList.length-1
    })
  },
  // 页面每次加载时被调用（第二步）
  onShow: function () {

  },
  // 每次页面渲染完成，可以交互（第三步）
  onReady: function () {

  },
  // 页面隐藏时（加载其他页面）
  onHide: function () {

  },
  // 页面被关闭/卸载时调用，如重定向
  onUnload: function () {

  }

单向绑定：视图层更新不会引起内部状态数据变化

this.setData()

<text>{{count}}</text>
 <!-- bindtap（冒泡-唤醒父元素进行下一级处理）和catchtap（非冒泡）均可进行事件绑定 -->
  <button bindtap='f0'>show count</button>

f0:function(event) {
    //视图层无法更新  this.data.count = this.data.count+1
    this.setData({
       //初始化时，无此变量则直接定义并赋值
      count: this.data.count + 1,
      //无效标识符放入双引号内 更改名字为教父3
      "weeklyMovieList[2].name":"教父3"
    })
  }

小程序入门学习05--幻灯片、页面生命周期

页面生命周期

相关推荐