演员表设计

要求：列表渲染以及条件渲染

效果展示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- WXML -->
<view class="box">
  <block wx:for="{{Film_CangLanJue}}">
    <block wx:if="{{index == 0}}">
        <view class="title">女一：</view>
        <view class="role">角色：{{item.role}}</view>
        <view class="actor">扮演者：{{item.actor}}</view>
    </block>
    <block wx:if="{{index == 1}}">
        <view class="title">男一：</view>
        <view class="role">角色：{{item.role}}</view>
        <view class="actor">扮演者：{{item.actor}}</view>
    </block>
    <block wx:if="{{index == 2}}">
        <view class="title">男二：</view>
        <view class="role">角色：{{item.role}}</view>
        <view class="actor">扮演者：{{item.actor}}</view>
    </block>
    ***********************
  </block>
</view>
1
2
3
4
5
/* WXSS */
.box {
  margin: 10px auto;
  width: 90%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    Film_CangLanJue: [
      {
        role: '小兰花',
        actor: '虞书欣'
      },
      {
        role: '东方青苍',
        actor: '王鹤棣'
      },
      {
        role: '长珩仙君',
        actor: '张凌赫'
      }
    ]
  }
})
1
2
3
4
5
6
7
<!-- WXML -->
<block wx:for="{{Film_CangLanJue}}">
    <view class="title">{{index}}：</view>
    <view class="role">角色：{{item[0]}}</view>
    <view class="actor">扮演者：{{item[1]}}</view>
    ***********************
</block>
1
2
3
4
5
/* WXSS */
.box {
  margin: 10px auto;
  width: 90%;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
// index.js
// 获取应用实例
const app = getApp()

Page({
  data: {
    Film_CangLanJue: {
      '女一': ['小兰花', '虞书欣'],
      '男一': ['东方青苍', '王鹤棣'],
      '男二': ['长珩仙君', '张凌赫']
    }
  }
})