微信小程序笔记4

20190424

1. 使用swiper组件

从列表展示变为幻灯片轮播展示
设置幻灯片宽高时，一般在swiper元素上统一设置
简单的应用

<swiper>
    <swiper-item>B</swiper-item>
    <swiper-item>T</swiper-item>
    <swiper-item>S</swiper-item>
  </swiper>

例子：
weekly.wxml文件

<!-- weekly.wxml -->
<view class=''>
  <text class='title'>每周推荐</text>
  <swiper class='movie-swiper' indicator-dots='{{true}}' previous-margin='50rpx' next-margin='50rpx'>
  <swiper-item class='movie' wx:for='{{weeklyMovieList}}'>
  <view class='main in'>
  <image class='movie-image' src='{{item.imagePath}}'></image>
  <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>

indicator-dots=’{{true}}'显示幻灯片下方

previous-margin='50rpx' next-margin='50rpx'前一张幻灯片与后一张幻灯片的margin。
wx:for列表显示

weekly.wxss文件

.title{
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: pink;
  font-weight: 800;
  display: inline-block
}
image{
  width: 200px;
  height: 300px;
}
.movie{
  display: flex;
}
.movie-details{
  display:flex;
  flex-direction: column;
  width: 550rpx;
}
.movie-swiper{
  height: 90vh;
}
.in{
  height: 100%;
  width: 100%;
  background: pink;
  margin: 10px;
}

weekly.js文件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    weeklyMovieList:[
      {
      name:"A Star Is Born",
      comment:"SUGA's 推荐，绝对完美",
      imagePath:"/images/star.jpg",
      isHighlyRecommended:false
      },
      {
        name: "泰坦尼克号",
        comment: "JIMIN and JIN's 推荐，绝对完美",
        imagePath: "/images/tai.jpg",
        isHighlyRecommended: true
      },
      {
        name: "复仇者联盟",
        comment: "RM's 推荐，绝对完美",
        imagePath: "/images/fu.jpg",
        isHighlyRecommended: false
      }
    ],
  },

2. 页面的生命周期函数

swiper中默认切换到最后一张幻灯片

current=‘1’默认为第二页幻灯片

current=’{{weeklyMovieList.length - 1}}'默认到最后一页，就是本周推荐

非本周幻灯片页添加返回本周按钮

current='{{weeklyMovieList.length - 1}}'current值为这个值时，本周按钮不易添加函数返回本周推荐

wx:if=’{{index < (weeklyMovieList.length - 1)}}'指本周推荐页面中没有本周推荐按钮

界面状态数据如何初始化onload（options）
另一方法默认切换到本周推荐

onShow，onReady
onHide，onUnload

3. 更新数据

this.setData(）方法–更新数据并让框架自动更新相关视图

在小程序中对内部状态数据进行更新，不能采用直接赋值写入的方式

改成另一种方式写入，视图层得到真正的更新



this.setData(）局部更新

4. 事件机制

使用catchtap绑定
catchtap与bindtap的区别
返回本周按钮的实现