运行时初始状态, 向右切换, 点击后状态(数据是乱编的)
创建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,
})
扫描二维码关注公众号,回复:
3082511 查看本文章
根据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, 做真实数据请求