微信小程序极简入门（四）--豆瓣电影小程序页面详情跳转

上一节无论是页首还是内容都是以列表的形式滚动，那么这节来看看如何点击列表进入详情页。

1.首先在app.json中pages中添加代码：

    "pages/douban/item",

自动新建item相关页面。

2.在逻辑层pages/douban/item.js中修改data变量为：

 data: {
    loading: true,
    movie: {}
  },

将onLoad函数修改为：

 onLoad(options) {
    let app = getApp()

    app.request(`https://api.douban.com/v2/movie/subject/${options.id}`)
      .then(d => {
        this.setData({ movie: d, loading: false });
        wx.setNavigationBarTitle({ title: d.title });
      }).catch(e => {
        console.error(e);
      })
  }
})

onLoad函数中，使用promise方式从豆瓣API拉取数据，然后在then回调取得数据并绑定。
loading变量用于指示数据是否加载完成，可使用它在页面显示一个加载提示。
options是从其它页面传过来的参数的集合，可从中获取id，这将是pages/douban/item.wxml标签中自定义的参数名称。这里使用电影的id，可从豆瓣api中拉取某个电影的详细信息。

3.视图层 pages/douban/item.wxml
打开pages/douban/item.wxml，修改标签代码为：

<!--pages/douban/item.wxml-->
<loading hidden="{{ !loading }}">加载中</loading>
<image style="position: fixed;left: 0;top: 0;right: 0;bottom: 0;height: 100%;width: 100%;z-index: -1000;opacity: .05;" src="{{ movie.images.large }}" mode="aspectFill" />
<scroll-view scroll-y>
  <view class="weui-article">
    <view class="weui-article__section">
      <image class="weui-article__img" src="{{ movie.images.large }}" mode="aspectFit" style="width: 100%;height: 800rpx" />
    </view>
    <view class="weui-article__h1">{{ movie.title }}({{ movie.year }})</view>

    <view class="weui-article__section">
      <view class="weui-media-box__info" style="margin-top:10rpx;">
        <view class="weui-media-box__info__meta">评分：{{ movie.rating.average }}</view>
      </view>
      <view class="weui-media-box__info" style="margin-top:10rpx;">
        <view class="weui-media-box__info__meta">导演：
          <block wx:for="{{ movie.directors }}" wx:key="{{ item.id }}"> {{ item.name }} </block>
        </view>
      </view>
      <view class="weui-media-box__info" style="margin-top:10rpx;">
        <view class="weui-media-box__info__meta">主演：
          <block wx:for="{{ movie.casts }}" wx:key="{{ item.id }}"> {{ item.name }} </block>
        </view>
      </view>
    </view>

    <view class="weui-article__section">
      <view class="weui-article__p">
        {{ movie.summary }}
      </view>
    </view>
  </view>
</scroll-view>

loading组件可以用它以绑定变量的方式来控制它的显示。如果组件的属性是一个布尔值，那么只有使用这样的绑定方法才可能使它的值为false:

hidden="{{!loading}}"

这里再一次使用了scroll-view组件，但是scroll-y为true，代表允许纵向滚动

4.页面跳转
打开文件pages/douban/index.wxml，在swiper和scorll组件的navigator组件中添加url指向pages/douban/item.wxml:

<!--pages/douban/index.wxml-->
<swiper style="height:450rpx" indicator-dots autoplay="true" interval="5000" duration="1000">
  <swiper-item wx:for="{{ boards[0].movies }}" wx:key="{{ item.id }}">
    <navigator url="item?id={{item.id}}" hover-class="none">
      <image style="height:450rpx;width:750rpx;" src="{{ item.images.large }}" mode="aspectFill" />
    </navigator>
  </swiper-item>
</swiper>

<view wx:for="{{ boards }}" wx:key="{{ item.key }}" class="weui-panel weui-panel_access">
  <view class="weui-panel__hd">
  {{ item.title }}
  </view>

  <view class="weui-panel__bd">
    <view style="padding:10px" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
      <scroll-view scroll-x>
        <view style="display:flex;">
          <navigator url="item?id={{item.id}}" wx:for="{{ item.movies }}" wx:key="{{ item.id }}">
            <view style="display:flex;flex-direction:column;width:180rpx;margin:10rpx;">
              <image style="width:180rpx;height:250rpx;" src="{{ item.images.large }}" mode="aspectFill" />
              <text style="text-align:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:13px;padding-top:5rpx;">{{ item.title }}</text>
            </view>
          </navigator>
        </view>
      </scroll-view>
    </view>
  </view>

  <view class="weui-panel__ft">
    <navigator url="list?type={{item.key}}" class="weui-cell weui-cell_access weui-cell_link">
      <view class="weui-cell__bd">更多</view>
      <view class="weui-cell__ft weui-cell__ft_in-access"></view>
    </navigator>
  </view>
</view>

至此我们就完成了最典型的从列表页向详情页跳转的一步，逻辑是点击pages/douban/index.wxml上任意一张图片，就会带着这张图片的id到pages/douban/item.js中调用onLoading函数去从豆瓣API拉取数据，然后将拉取的数据渲染给pages/douban/item.wxml。

5.点击模拟器查看效果：

github地址：https://github.com/lightTrace/xiaochengxu/tree/master/douban-v3