微信小程序电影详情功能实现

实现电影详情页

主要实现的功能是：点击热映及top列表中的电影可以跳转到电影详情页面

一、 主要需求：

1. 基本的布局改变（多使用flex布局），图文混排
2. 事件处理；网络请求
3. 水平滚动scroll-view的实现

二、关键实现思路：

1. 使用bindtap绑定点击事件，给电影列表中的每一条信息循环绑定一个点击事件，当点击时，将从网络获取的电影id传到处理函数中，再请求网络获取电影详情信息，返回并显示页面。
2. 详情页上部分显示电影宣传海报，影片名及影片的基本信息，中间显示电影请节简介，下部分显示主演照片及姓名。对于过长的篇幅的处理是是页面可以进行上下滑动。

三、实际代码：

对热映及top电影列表页的改变：
修改index和movetop文件夹下的index.wxml文件。
index下的index.wxml：（更改布局及类型）

<!--index.wxml-->
<view class="box">

  <!--轮播图-->
  <swiper indicator-dots="{
  {indicatorDots}}" autoplay="{
  {autoplay}}" interval="{
  {interval}}" duration="{
  {duration}}">
    <block wx:for="{
  {imgUrls}}" wx:key="{
  {item}}">
      <swiper-item>
        <image src="{
  {item}}" />
      </swiper-item>
    </block>
  </swiper>

  <!--热映列表展示-->
  
   <view class="item" bindtap="showInfo" data-id="{
  {item.id}}" hover-class="tapClass"
  wx:for="{
  {moves}}" wx:key="{
  {item}}">
 
      <image class="img" mode="aspectFit" src="{
  {item.images.large}}"></image>
 
      <view class="movie-info">
      <view class="movie-row">
        <span class="content">{
  {item.title}}</span>
      </view>
       
 
        <view class="movie-row">
          <text class="label">主演:</text>
          <s