TEL：021-61554458
點(diǎn)擊每個(gè)列表項(xiàng)，能后看到更多的細(xì)節(jié)和大圖。在本頁(yè)面展示或者加個(gè)彈窗是基本不可能的了。下面我們就創(chuàng)建一個(gè)新的頁(yè)面來(lái)展示更多細(xì)節(jié)（我們之前已經(jīng)創(chuàng)建了2個(gè)頁(yè)面，其中rank頁(yè)面還是空的，這里故意先不寫(xiě)，后面自然會(huì)補(bǔ)在）
對(duì)于每一個(gè)頁(yè)面都需要寫(xiě)到app.json的pages中，因此要將我們新增的"pages/detail/detail"添加到“pages”數(shù)組中去。如果新增的頁(yè)面是底部tabBar欄中的一項(xiàng)，還需要添加到tabBar中的List數(shù)組，我們這里是列表點(diǎn)擊時(shí)的新頁(yè)面，所以不需要寫(xiě)到list中。
我們希望的效果大概是這樣的：
現(xiàn)在有一個(gè)問(wèn)題時(shí)：我如何在點(diǎn)擊的時(shí)候獲取到對(duì)應(yīng)的每一項(xiàng)的數(shù)據(jù)，并且在新的頁(yè)面展示出來(lái)呢？
這里要解決2個(gè)問(wèn)題：
###導(dǎo)航；
實(shí)現(xiàn)導(dǎo)航的方法有2種，一種是直接利用navigator組件, 另一種是利用導(dǎo)航api，通過(guò)給列表添加點(diǎn)擊事件，實(shí)現(xiàn)wx.navigateTo（保留當(dāng)前頁(yè)面，有左上角返回）或者wx.redirectTo（關(guān)閉當(dāng)前頁(yè)面，沒(méi)有右上角返回按鈕）。
<block wx:for="{{moivelist}}"> //在這之后插入導(dǎo)航標(biāo)簽<navigator url="../detail/detail">//url對(duì)應(yīng)文件的路徑，不需要寫(xiě)后綴wxmlxxxxx還是原來(lái)的配方xxxxxxxx</navigator></block>
<view class="container"><image class="imgs" style="" mode="" src="{{item.images.large}}" binderror="" bindload=""></image><text> {{item.title}} </text><text> {{"評(píng)分"+item.original_title}} </text><text> {{"導(dǎo)演"+item.directors[0].name}} </text><text> {{"主演"+item.rating.average}} </text></view><view>{{item.summary}}</view>
跟之前index一樣，我們這里的數(shù)據(jù)也是從js拿過(guò)來(lái)，不過(guò)這里是從detail.js拿的，但是這個(gè)時(shí)候detail.js中的data是沒(méi)有數(shù)據(jù)的，因?yàn)槲覀兿Ｍ麛?shù)據(jù)是從index列表的每一項(xiàng)點(diǎn)擊時(shí)傳過(guò)來(lái)的，而不是我們直接寫(xiě)到detail.js里面的，這個(gè)時(shí)候就需要用到生命周期函數(shù)的onload函數(shù)了
也就是說(shuō)，每個(gè)頁(yè)面在Onload時(shí)，都可以獲取上一個(gè)頁(yè)面?zhèn)鬟f給你的參數(shù)（假如有的話），那么現(xiàn)在要解決2個(gè)問(wèn)題：1是上一個(gè)頁(yè)面如何傳給我，2是我如何接收數(shù)據(jù)。
舊頁(yè)面?zhèn)鬟f參數(shù)：
我們剛才在index里面加了一個(gè)導(dǎo)航并且 url="../detail/detail" ，需要傳遞參數(shù)時(shí)，僅需要在url后面：+?+數(shù)據(jù)
例如：url="../detail/detail?id=test"
例如：https://i.cnblogs.com/EditPosts.aspx?opt=1
可以發(fā)現(xiàn)格式其實(shí)就是get提交數(shù)據(jù)時(shí)的格式，寫(xiě)過(guò)html表單form的一定很熟悉了，需要提交多個(gè)參數(shù)時(shí)，需要在后面加 & 符號(hào)
例如： url="../detail/detail?id=test1&name=test2&age=12345"
新頁(yè)面接受數(shù)據(jù) (注意只有在Onload時(shí)才可以接受傳過(guò)來(lái)的數(shù)據(jù))
在新頁(yè)面js中 onLoad: function(options) {console.log(options)} 即可打印出傳過(guò)來(lái)的數(shù)據(jù)，你會(huì)發(fā)現(xiàn)這是一個(gè)對(duì)象，我們需要將這個(gè)對(duì)象,通過(guò)this.setData轉(zhuǎn)化為新頁(yè)面的數(shù)據(jù)，
//我們這里為什么要用item是因?yàn)槲覀兩厦娴臄?shù)據(jù)綁定用的是{{item.xxx}}, 需要對(duì)應(yīng)好，如果一個(gè)發(fā)生變動(dòng)，另一個(gè)也要跟著改變
//detai.js代碼如下：
Page({
data:{
title:"加載中",
item:{},
loading:false
},
onLoad:function(options){
this.setData({
item:options
})
},
onReady:function(){
},
onShow:function(){
},
onHide:function(){
},
onUnload:function(){
}
})
目前我們前面的第二個(gè)導(dǎo)航rank還空著呢，從表象上看，rank的格式跟index是一樣，僅僅是數(shù)據(jù)不同，那么我們只要把index的文件復(fù)制一份過(guò)來(lái)就可以了，把模擬的數(shù)據(jù)改一下即可。
雖然可以，但是代碼很多重復(fù)，下面我們就引進(jìn)一個(gè)新的東西叫模板 template 。
<template name="test"><view>hhahahha我是模板{{item}}</view></template>
因此，同樣的我們?cè)賱?chuàng)建一個(gè)文件夾template放模板，同時(shí)創(chuàng)建.js和.wxml文件這2個(gè)即可。 template.js并不需要數(shù)據(jù)，只是用來(lái)注冊(cè)一下頁(yè)面（不注冊(cè)控制臺(tái)有報(bào)錯(cuò)提示你page.js xxx什么的），將其他頁(yè)面的.js復(fù)制過(guò)來(lái)，并將data里面的數(shù)據(jù)和其他的事件都出掉，保留最基本的空數(shù)據(jù)和空函數(shù)。
<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>//使用模板，并通過(guò)wx:for將數(shù)據(jù)循環(huán)展示出來(lái)</block></scroll-view>
將index.wxss和index.js文件復(fù)制一份到rank.js，同時(shí)將rank.js中data的數(shù)據(jù)稍微修改一下，不要讓數(shù)據(jù)都跟index的一樣.同時(shí)將我們的index.wxml中列表也修改為使用上面的模板，至此就基本完成了。
回顧一下我們主要的知識(shí)點(diǎn)：導(dǎo)航寫(xiě)法，如何傳遞參數(shù)，聲明周期函數(shù)，如何獲取傳遞過(guò)來(lái)參數(shù)，如何定義和使用模板及使用參數(shù)。
網(wǎng)站首頁(yè)
