幻灯片
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"
})
}
