小程序基础综合使用

运行时初始状态, 向右切换, 点击后状态(数据是乱编的)

创建wxml结构 :

<view>
  <swiper indicator-dots current='{{current}}'>
    <swiper-item wx:for='{{moviList}}'>
      <view class='p'>
        <button wx:if='{{index !== moviList.length-1}}' class='c' bindtap='last'>去最后一张</button>
        <text>名称: {{item.movieName}}</text>
        <text>年份: {{item.year}}</text>
        <text>评分: {{item.score}}</text>
        <image src='{{item.img}}' data-movie_id='{{item.id}}' catchtap="tap"></image>
      </view>
    </swiper-item>
  </swiper> 
</view>

样式控制:

swiper {                  /*swiper组件的高和边距*/
  height: 700rpx;
  padding: 20rpx 50rpx;
}
.p {
  display: flex;         /*盒子布局*/
  flex-direction: column;
  justify-content: space-around;
  position: relative
}
.c {
  position: absolute;     /*定位按钮坐标*/
  top:200rpx;
  right: 10rpx;
  color: deeppink
}

js处理:

Page({
  data: {        // 为了演示功能写死在这里, 真实情况是调用api来获得
    moviList:[    
      { "movieName": "霸王别姬", "year": 1997, "id":1, "score": 97, "img": 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },

      { "movieName": "中国功夫", "year": 1995, "id":2, "score": 90, "img": 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg'},

      { "movieName": "白蛇传", "year": 1994, "id":3, "score": 95, "img": 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'}
    ],
    current : 0
  },
  tap:function(e) {
    var id = e.currentTarget.dataset.movie_id;
    wx.navigateTo({
      url: '../detail/detail?movie_id=' + id,
    })
  },

  last:function() {
    var arr = this.data.moviList;
    console.log(arr.length);
    this.setData({
      current : arr.length-1
    });
  }
})

 我在图片上定义了一个事件 和 一个自定义属性(data-*)

当点击图片时, 这个自定义属性(这里代表的是id)就通过事件传递到了js中

再通过:

wx.navigateTo({

      url: '../detail/detail?movie_id=' + id,

})

根据id, 构建出不同的url, 这样到达新页面时, 会根据id的不同获取不同的数据

新页面的构建:

<view>
  <block wx:for='{{movieList}}'>
    <view wx:if="{{item.id == movie_id}}">
      <view>名称: {{item.movieName}}</view>
      <!--详情信息等-->
    </view>
  </block>
</view>

新页面的js构建:

Page({
  data: {
    movie_id:0,
    //movie:{},        // 根据id得到的数据, 应该是单个对象, 这里就用写死的数组了
    movieList: [
      { "movieName": "霸王别姬", "year": 1997, "id": 1, "score": 97, "img": 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg' },

      { "movieName": "中国功夫", "year": 1995, "id": 2, "score": 90, "img": 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg' },

      { "movieName": "白蛇传", "year": 1994, "id": 3, "score": 95, "img": 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg' }
    ]
  },

  onLoad: function (options) {
    var id = options.movie_id;
    this.setData({
      movie_id : id
    });                            // 真实获取数据可能是从调用api来获得
    // wx.request({
    //   url: '',
    // })
  }
})

在每一个页面初始化时, 会调用生命周期函数: onLoad

url中问号后面的参数会被封装到onLoad函数的参数中

比如上面的url: pages/detail/detail?movie_id=1, 那么movie_id=1这个数据就会被封装到onLoad的参数中

通过onLoad函数的参数就可以取出来, 如上面: options.movie_id

就可以利用获得的这个id值去后续调用api, 做真实数据请求