首页数据已经获得了，然后就是把数据显示在页面上

1．搜索框布局

首页最上面是搜索框，单击搜索框跳转到搜索页面。搜索框页面布局代码如下。

  1. <view class="weui-search-bar">
  2.   <navigator url="/pages/search/search"class="weui-search-bar__form">
  3.     <view class="weui-search-bar__box">
  4.       <icon class="weui-icon-search_in-box"
  5.       type="search"size="14"></icon>
  6.       <input type="text" class="weui-search-bar__input" />
  7.     </view>
  8.     <label class="weui-search-bar__label">
  9.       <icon class="weui-icon-search" type="search" size="14"></icon>
  10.       <view class="weui-search-bar__text">搜索</view>
  11.     </label>
  12.   </navigator>
  13. </view>

2．轮播图布局

首页轮播显示的是即将上映的电影数据
单击轮播图跳转到对应的电影详情页面

所以，在navigator的url上把电影id传到item详情页面

传递方式是在url上拼接？参数名=参数值&参数名=参数值的方式，代码如下。

  1. <swiper style="height:450rpx"
  2. indicator-dots autoplay="true"
  3. interval="5000" duration="1000">
  4.   <swiper-item wx:for="{{ boards[1].movies }}" wx:key="{{ item.id }}">
  5.     <navigator url="/pages/item/item?id={{item.id}}" hover-class="none">
  6.       <image style="height:450rpx;width:750rpx;"
  7.       src="{{ item.images.large }}" mode="aspectFill" />
  8.     </navigator>
  9.   </swiper-item>
  10. </swiper>

3．电影模块

所有电影数据已经请求到了，均保存在boards中
每个电影模块中又有多个电影数据

所以使用双层wx:for循环

  • 外层的wx:for用来遍历显示电影模块
  • 内层的wx:for用来遍历每个模块的电影

代码如下

  1. <view wx:for="{{ boards }}" wx:key="{{ item.key }}"
  2.   class="weui-panel weui-panel_access">
  3.   <view class="weui-panel__hd">
  4.   {{ item.title }}
  5.   </view>
  6.   <view class="weui-panel__bd">
  7.     <view style="padding:10px"
  8.       class="weui-media-box weui-media-box_appmsg">
  9.       <scroll-view scroll-x>
  10.         <view style="display:flex;">
  11.           <navigator url="/pages/item/item?id={{item.id}}"
  12.             wx:for="{{ item.movies }}" wx:key="{{ item.id }}">
  13.             <view class='movie-item' >
  14.               <image style="width:180rpx;height:250rpx;"
  15.               src="{{ item.images.large }}" mode="aspectFill" />
  16.               <text class="movie-title">{{ item.title }}</text>
  17.             </view>
  18.           </navigator>
  19.         </view>
  20.       </scroll-view>
  21.     </view>
  22.   </view>
  23.     <view class="weui-panel__ft">
  24.        <navigator url="/pages/list/list?type={{item.key}}"
  25.        class="weui-cell weui-cell_access weui-cell_link">
  26.        <view class="weui-cell__bd">更多</view>
  27.        <view class="weui-cell__ft weui-cell__ft_in-access"></view>
  28.        </navigator>
  29.     </view>
  30. </view>

单击每项也是跳转到电影详情页
url="/pages/item/item?id={{item.id}}"

每个电影模块下都有一个“更多”链接，单击“更多”链接跳转到电影列表页面
url="/pages/list/list?type={{item.key}}"

通过url传递集合名称item.key，显示对应的列表页