24.更多电影
app.json
"pages": [
"pages/posts/post",
"pages/welcome/welcome",
"pages/posts/post-detail/post-detail",
"pages/movies/movies",
"pages/movies/more-movie/more-movie"
],
more-list-template.wxml
<view class="more" catchtap='onMoreTap' data-category="{{categoryTitle}}">
<text class="more-text">更多</text>
<image class="more-img" src="/images/icon/arrow-right.png"></image>
</view>
movies.js
onMoreTap:function(event){
var category = event.currentTarget.dataset.category;
wx.navigateTo({
url: 'more-movie/more-movie?category=' + category
})
},
more-movie.js
// pages/movies/more-movie/more-movie.js
Page({
onLoad: function (options) {
var category = options.category;
console.log(category);
},
})
分别点击更多,可以看到对应的分类
25.动态设置导航栏标题
more-movie.js
// pages/movies/more-movie/more-movie.js
Page({
data:{
categoryTitle: '',
},
onLoad: function (options) {
var category = options.category;
this.data.categoryTitle = category;
console.log(category);
},
onReady: function () {
wx.setNavigationBarTitle({
title: this.data.categoryTitle,
})
},
})
26.更多电影页面数据加载
util.js
function http(url, callback) {
wx.request({
url: url,
method: 'GET',
header: {
'content-type': 'json'
},
success: function (res) {
callback(res.data)
}
})
}
module.exports = {
convertToStarArray: convertToStarArray,
http: http,
};
more-movie.js
var util = require('../../../utils/util.js')
var app = getApp();
Page({
data:{
categoryTitle: '',
movies: {},
},
onLoad: function (options) {
var category = options.category;
this.data.categoryTitle = category;
var dataUrl = ''
switch (category) {
case "正在热映":
dataUrl = app.globalData.g_baseUrl + "/v2/movie/in_theaters";
break;
case "即将上映":
dataUrl = app.globalData.g_baseUrl + "/v2/movie/coming_soon";
break;
case "豆瓣Top250":
dataUrl = app.globalData.g_baseUrl + "/v2/movie/top250";
break;
}
util.http(dataUrl, this.processDoubanData)
},
processDoubanData:function(data){
var movies = [];
for (var idx in data.subjects) {
var subject = data.subjects[idx]
var title = subject.title;
if (title.length >= 6) {
title = title.substring(0, 6) + "...";
}
var temp = {
stars: util.convertToStarArray(subject.rating.stars),
title: title,
average: subject.rating.average,
coverageUrl: subject.images.large,
movieId: subject.id
}
movies.push(temp)
}
this.setData({
movies: movies
});
},
onReady: function () {
wx.setNavigationBarTitle({
title: this.data.categoryTitle,
})
},
})
movie-grid-template.wxml
<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
<view class="grid-container">
<block wx:for="{{movies}}" wx:for-item="movie">
<view class="single-view-container">
<template is="movieTemplate" data="{{...movie}}" />
</view>
</block>
</view>
</template>
movie-grid-template.wxss
@import "../movie/movie-template.wxss";
/*scroll-view*/
.single-view-container{
float:left;
margin-bottom: 40rpx;
}
.grid-container{
height: 1300rpx;
margin:40rpx 0 40rpx 6rpx;
}
more-movie.wxml
<import src="../movie-grid/movie-grid-template.wxml" />
<template is="movieGridTemplate" data="{{movies}}" />
more-movie.wxss
@import "../movie-grid/movie-grid-template.wxss";
预览
27.实现上滑加载更多数据
movie-grid-template.wxml
<import src="../movie/movie-template.wxml" />
<template name="movieGridTemplate">
<scroll-view class="grid-container" scroll-y="true" scroll-x="false" bindscrolltolower="onScrollLower">
<block wx:for="{{movies}}" wx:for-item="movie">
<view class="single-view-container">
<template is="movieTemplate" data="{{...movie}}" />
</view>
</block>
</scroll-view>
</template>
more-movie.js
var util = require('../../../utils/util.js')
var app = getApp();
Page({
data:{
categoryTitle: '',
movies: {},
requsetUrl: '',
isEmpty: true,
totalCount: 0
},
onLoad: function (options) {
.
.
.
this.data.requsetUrl = dataUrl;
util.http(dataUrl, this.processDoubanData)
},
processDoubanData:function(data){
.
.
.
var totalMovies = {}
if (!this.data.isEmpty) {
totalMovies = this.data.movies.concat(movies)
} else {
totalMovies = movies
this.data.isEmpty = false
}
this.setData({
movies: totalMovies
})
this.data.totalCount += 20;
},
onScrollLower:function(event){
var nextUrl = this.data.requsetUrl +
"?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl,this.processDoubanData)
},
原文地址:https://www.cnblogs.com/derek1184405959/p/9500988.html
时间: 2024-11-05 23:26:58