上一节写了一个首页列表的展示，现在我们需要一个效果：

点击每个列表项，能后看到更多的细节和大图。在本页面展示或者加个弹窗是基本不可能的了。下面我们就创建一个新的页面来展示更多细节（我们之前已经创建了2个页面，其中rank页面还是空的，这里故意先不写，后面自然会补在）

在pages下创建新的文件夹：detail，同时创建4个detail文件js,json,wxml,wxss

对于每一个页面都需要写到app.json的pages中，因此要将我们新增的"pages/detail/detail"添加到“pages”数组中去。如果新增的页面是底部tabBar栏中的一项，还需要添加到tabBar中的List数组，我们这里是列表点击时的新页面，所以不需要写到list中。

我们希望的效果大概是这样的：

现在有一个问题时：我如何在点击的时候获取到对应的每一项的数据，并且在新的页面展示出来呢？
这里要解决2个问题：

• ###导航；

• 参数的传递；

导航 :

实现导航的方法有2种，一种是直接利用navigator组件, 另一种是利用导航api，通过给列表添加点击事件，实现wx.navigateTo（保留当前页面，有左上角返回）或者wx.redirectTo（关闭当前页面，没有右上角返回按钮）。

为了方便我们这里直接采用组件来写

<block wx:for="{{moivelist}}">   //在这之后插入导航标签

    <navigator url="../detail/detail"> 

        //url对应文件的路径，不需要写后缀wxml

    　　　　xxxxx还是原来的配方xxxxxxxx

    </navigator>

</block>

<view class="container">

    <image class="imgs" style="" mode="" src="{{item.images.large}}" binderror="" bindload=""></image>

    <text> {{item.title}} </text>    

    <text> {{"评分"+item.original_title}} </text> 

    <text> {{"导演"+item.directors[0].name}} </text>  

    <text> {{"主演"+item.rating.average}} </text> 

</view>

<view>

    {{item.summary}}

</view>

//我们这里为什么要用item是因为我们上面的数据绑定用的是{{item.xxx}}, 需要对应好，如果一个发生变动，另一个也要跟着改变

 

//detai.js代码如下：

 

Page({

  data:{

    title:"加载中",

    item:{},

    loading:false

  },

 

    onLoad:function(options){

      this.setData({

        item:options

      })

    },

 

    onReady:function(){

            

     },

    

    onShow:function(){

 

    },

    

    onHide:function(){

 

    },

    

    onUnload:function(){

 

    }

})

<template name="test">

 

　　<view>hhahahha我是模板{{item}}</view>

 

</template>

<template name="try" >

    <navigator url="../detail/detail?imgsrc={{item.imgsrc}}&title={{item.title}}&author={{item.author}}&introduce={{item.introduce}}&rank={{item.rank}}">

    

        <view class="moive-item">

        

            <image class="moive-img" style="" mode="" src="{{item.imgsrc}}" binderror="" bindload=""></image>

            

            <view class="moive-content">

           

                <view class="content-titile">

                    <text>{{item.title}}</text>

                </view>

                    

                <view class="content-introduce"> 

                    <text>{{item.introduce}}</text>

                </view>

                    

                <view class="content-author">

                    <text>{{item.author}}</text>    

                </view>    

            </view>

            

            <text class="content-rank">{{item.rank}}</text>

        </view> 

    </navigator>

</template>

<view class="head-title" ">

    <text>电影top20</text>

</view>

 

<scroll-view class="main" scroll-y="true" bindscrolltoupper="" bindscrolltolower="" bindscroll="" scroll-into-view="" scroll-top="">

      <import src="../temple/temple.wxml"></import> 

      //引入模板

     <block wx:for="{{moivelistB}}">

        <template is="try" data="{{item}}"></template>  

         //使用模板，并通过wx:for将数据循环展示出来

     </block>   

</scroll-view>