上一節(jié)寫了一個首頁列表的展示，現(xiàn)在我們需要一個效果：

點擊每個列表項，能后看到更多的細(xì)節(jié)和大圖。在本頁面展示或者加個彈窗是基本不可能的了。下面我們就創(chuàng)建一個新的頁面來展示更多細(xì)節(jié)（我們之前已經(jīng)創(chuàng)建了2個頁面，其中rank頁面還是空的，這里故意先不寫，后面自然會補(bǔ)在）

在pages下創(chuàng)建新的文件夾：detail，同時創(chuàng)建4個detail文件js,json,wxml,wxss

對于每一個頁面都需要寫到app.json的pages中，因此要將我們新增的"pages/detail/detail"添加到“pages”數(shù)組中去。如果新增的頁面是底部tabBar欄中的一項，還需要添加到tabBar中的List數(shù)組，我們這里是列表點擊時的新頁面，所以不需要寫到list中。

我們希望的效果大概是這樣的：

現(xiàn)在有一個問題時：我如何在點擊的時候獲取到對應(yīng)的每一項的數(shù)據(jù)，并且在新的頁面展示出來呢？
這里要解決2個問題：

• ###導(dǎo)航；

• 參數(shù)的傳遞；

導(dǎo)航 :

實現(xiàn)導(dǎo)航的方法有2種，一種是直接利用navigator組件, 另一種是利用導(dǎo)航api，通過給列表添加點擊事件，實現(xiàn)wx.navigateTo（保留當(dāng)前頁面，有左上角返回）或者wx.redirectTo（關(guān)閉當(dāng)前頁面，沒有右上角返回按鈕）。

為了方便我們這里直接采用組件來寫

<block wx:for="{{moivelist}}">   //在這之后插入導(dǎo)航標(biāo)簽

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

        //url對應(yīng)文件的路徑，不需要寫后綴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> {{"導(dǎo)演"+item.directors[0].name}} </text>  

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

</view>

<view>

    {{item.summary}}

</view>

//我們這里為什么要用item是因為我們上面的數(shù)據(jù)綁定用的是{{item.xxx}}, 需要對應(yīng)好，如果一個發(fā)生變動，另一個也要跟著改變

 

//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將數(shù)據(jù)循環(huán)展示出來

     </block>   

</scroll-view>