一、将详细页面中的导航栏动态更改
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) {}
})
}
onLoad:
function (options) {
var category=options.category;
先在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页面中加载数据
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:
40
rpx;
}
.container{
margin:
40
rpx
0
40
rpx
6
rpx;
height:
1300
rpx; 后面会讲为什么要给高度
}
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";
三、上滑加载更多数据
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:
1300
rpx;
}
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);
}
4.在onLoad中，switch判断完dataUrl赋值完，将dataUrl传给requestUrl
this.setData({
requestUrl: dataUrl
});
this.data.totalCount+=
20;
this
.data.设置可以，但是最好用
this
.setData
// var count = this.data.totalCount;
// count += 20;
this.setData({
movies: totalMovies
// totalCount: count
});
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
});