【練習】將詳細頁面中的導航欄動態更改，根據電影型別在more-movie頁面中載入資料，上滑載入更多資料

一、將詳細頁面中的導航欄動態更改

1.在movie-list-template.wxml中 ：

<text class="more" catchtap='onMoreTap' data-category="{{categoryTitle}}">更多></text>

給哪個標籤繫結事件，想在這個事件中傳輸資料，就在這個標籤中自定義屬性

之前在movie.js中更改slogan,繫結了事件categoryTitle

2.在movie.js中：

onMoreTap:function(event){

var category=event.currentTarget.dataset.category; 獲取點選事件標籤中的資料

wx.navigateTo({

url: 'more-movie/more-movie?category=' + category,

success: function(res) {}

})

}

3.在more-movie.js中獲取傳輸的資料

onLoad: function (options) {

var category=options.category;

4.動態設定導航欄必須寫在onReady中，所以需要中間變數

先在data中定義中間變數：

data: {

navigateTitle:{}

}

在onLoad中繫結資料：

onLoad: function (options) {

var category=options.category;

this.setData({

navigateTitle: category

});

}

在onReady中使用資料：

onReady:function(event){

wx.setNavigationBarTitle({

title: this.data.navigateTitle

}) 動態設定標題欄的方法

通常都是在.json檔案中

"navigationBarTitleText": "導航欄內容"

}

二、根據電影型別在more-movie頁面中載入資料

1.在util.js中將wx.request封裝成公共函式

function http(url,callBack) {callBack只是函式名

wx.request({

url: url,

method: "GET",

header: { "Content-Type": "" },

success: function (res) {

callBack(res.data); 具體使用函式，要加引數

}

});

}

出口：

module.exports={

http:http

}

2.在more-movie.js中引入

var util=require("../../../utils/util.js");

3.在more-movie.js中的onLoad函式中，判斷傳入的資料category從而更改url,再呼叫http函式，傳入url

之前已經傳入了資料category

onLoad: function (options) {

var category=options.category;

var dataUrl="";

switch (category){

case "正在熱映":

dataUrl = app.globalData.doubanBase + "/v2/movie/in_theaters"; var app=getApp();一開始就要引入

break;

case "即將上映":

dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon"; 預設20條資料

break;

case "top250":

dataUrl = app.globalData.doubanBase + "/v2/movie/top250";

break;

};

util.http(dataUrl, this.processDoubanData);

}

4.封裝回撥函式processDoubanData

processDoubanData:function(data){

var movies = [];

for (var i in data.subjects) {

var subject = data.subjects[i];

var title = subject.original_title;

if (title.length >= 6) {

title = title.substring(0, 6) + "...";

}

var temp = {

stars: subject.rating.stars,

title: title,

average: subject.rating.average,

coverageUrl: subject.images.large,

movieId: subject.id

}

movies.push(temp);

}

this.setData({

movies: movies

});

}

5.在movie專案中建立movie-grid-template專案

movie-grid-template.wxml：

<import src="../movie-picture-template/movie-picture-template.wxml" />

<template name="movie-grid-template">

<scroll-view class="container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">

<block wx:for="{{movies}}" wx:for-item="movie">

<view class="template">

<template is="movie-picture-template" data="{{...movie}}" />

</view>

</block>

</scroll-view>

</template>

movie-grid-template.wxss：

@import "../movie-picture-template/movie-picture-template.wxss";

.template{

float: left; 用float不用flex是因為flex對scroll-view沒有作用

margin-bottom: 40rpx;

}

.container{

margin: 40rpx 0 40rpx 6rpx;

height: 1300rpx; 後面會講為什麼要給高度

}

6.more-movie中引入模版

<import src="../movie-grid-template/movie-grid-template.wxml" />

<template is="movie-grid-template" data="{{movies}}" />

@import "../movie-grid-template/movie-grid-template.wxss";

三、上滑載入更多資料

scroll-view元件

1.在movie-grid-template.wxml中，把最外面的view用scroll-view替換

<scroll-view class="container" scroll-y="true" 允許縱向滾動 scroll-x="false" 禁止橫向滾動 bindscrolltolower="onScrollLower" 滾動到底部/右邊會觸發>

（bindscrollupper滾動到頂部/左邊會觸發）

2.在more-movie.js中實現onScrollLower函式

必須給<scroll-view>給高度，超過這個高度才執行onScrollLower

.container{

height: 1300rpx;

}

3.頁面剛進入獲取的是0-19號資料，向上滑應該載入20-39

url要重新獲取

onScrollLower: function (event) {

var nextUrl = this.data.requestUrl+"?start="+this.data.totalCount+"&count=20";

util.http(nextUrl, this.processDoubanData);

}

只要是使用this.data.資料，就在data中定義一個初始值，totalCount：0

4.在onLoad中，switch判斷完dataUrl賦值完，將dataUrl傳給requestUrl

this.setData({

requestUrl: dataUrl

});

5.在processDoubanData中設定totalCount

this.data.totalCount+=20; this.data.設定可以，但是最好用this.setData

// var count = this.data.totalCount;

// count += 20;

this.setData({

movies: totalMovies

// totalCount: count

});

此時新載入的資料會替代原先的，因為movies每次呼叫方法都被覆蓋了

6.定義data:{isEmplty:true}，迴圈取完資料後，定義新的

var totalMovies={}; 新的

if(!this.data.isEmpty){

totalMovies = this.data.movies.concat(movies); 拼接

}else{

this.setData({

isEmpty: false

});

totalMovies=movies;

}

// var count = this.data.totalCount;

// count += 20;

this.data.totalCount+=20;

this.setData({

movies: totalMovies

// totalCount: count

});