【练习】将详细页面中的导航栏动态更改，根据电影类型在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

});