一、数据绑定
在js文件Page中添加data对象，在data对象中自定义对象，属性，在wxml文件中用{{属性}}绑定数据。
data: {
thisWeeklyMovie: {
name: "教父",
comment: "zzzz",
imagePath: "/imahes/daqiao.jpg",
isHighlyRecommended:true
},
count: 123,
score: 58
}
二、条件渲染
1、用wx:if实现条件渲染，满足条件时出现当前样式
<text wx:if="{{thisWeeklyMovie.isHighlyRecommended}}" style='font-size:16px;color:red'>强烈推荐</text>
2、用hidden隐藏样式实现条件渲染 注意：取反
<text hidden="{{!thisWeeklyMovie.isHighlyRecommended}}" style='font-size:16px;color:red'>强烈推荐</text>
3、两者比较： 1）hidden先渲染生成，控制其隐藏；wx:if条件成立才渲染生成，hidden初始化开销较大
2）可见性频繁切换时，wx:if条件渲染开销较大，不建议使用，此时使用hidden
三、列表渲染
wx:for应用，在js文件中定义数组，在wxml文件中用wx:for循环样式输出，item表示数组对象
wxml文件：
<view class='container'>
<text>本周推荐</text>
<view class='movie' wx:for="{{WeeklyMovieList}}" wx:key="WeeklyMovieListId" >
<image src='{{item.imagePath}}' class='movie-image'></image>
<view class='movie-detail'>
<text>第{{index+1}}周：{{item.name}}</text>
<text>点评:{{item.comment}}</text>
<text wx:if="{{item.isHighlyRecommended}}" style='font-size:16px;color:red'>强烈推荐</text>
</view>
</view>
</view>
JS文件：
data: {
WeeklyMovieList: [
{
name: "教父",
comment: "zzzz",
imagePath: "/images/daqiao.jpg",
isHighlyRecommended: true
},
{
name: "泰坦尼克号",
comment: "zzzz",
imagePath: "/images/daqiao.jpg",
isHighlyRecommended: true
},
{
name: "大鱼",
comment: "zzzz",
imagePath: "/images/daqiao.jpg",
isHighlyRecommended: true
}
],
count: 123,
score: 58
}
效果图：
四、swiper的使用(轮播图的实现)
<swiper>
<swiper-item>内容</swiper-item>
</swiper>
底部小圆点：indicator-dots='{{true}}'
示例代码：
<view>
<swiper indicator-dots='{{true}}' class='movie-swiper'
previous-margin='50rpx' next-margin='50rpx'>
<swiper-item class='movie' wx:for="{{WeeklyMovieList}}" wx:key="WeeklyMovieListId" >
<view class='container movie-cart'>
<image src='{{item.imagePath}}' class='movie-image'></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>
效果图：
请发表评论