微信小程序开发(五)

更多页面,和电影详情页面,如何使用上拉刷新、下拉加载。

加载更多页面

整个直接调用movieGridTemplate模版,即可。

movies-more

CDOE

pages/movies/more-movies/more-movies.wxml
1
2
3
<import src="../movie-grid/movie-grid-template.wxml" />

<template is="movieGridTemplate" data="{{movies}}"/>
pages/movies/more-movies/more-movies.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
var util = require("../../../utils/util.js");
var app = getApp();

Page({
data: {
movies: {},
navigationbartitle: "",
requesUrl: "",
totalCount: 0,
isEmpty: true,
},

/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var category = options.titles;
this.data.navigationbartitle = category;
var dataUrl = "";
// console.log(category)
switch (category) {
case "正在热映":
var dataUrl = app.globalData.doubanBase + "/v2/movie/in_theaters";
break;
case "即将上映":
var dataUrl = app.globalData.doubanBase + "/v2/movie/coming_soon";
break;
case "豆瓣Top250":
var dataUrl = app.globalData.doubanBase + "/v2/movie/top250";
break;
}
this.data.requesUrl = dataUrl;
util.http(dataUrl, this.processDoubanData)
},
//电影数据加载。
// onScrollLower: function (event) {
// var nextUrl = this.data.requesUrl + "?start=" + this.data.totalCount + "&count=20";
// util.http(nextUrl, this.processDoubanData);
// wx.showNavigationBarLoading();
// },
// 用<scroll-view>会出现顶端空白条。并触发不了ScrollLower函数采用onReachBottom
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function (event) {
var nextUrl = this.data.requesUrl + "?start=" + this.data.totalCount + "&count=20";
util.http(nextUrl, this.processDoubanData);
wx.showNavigationBarLoading();
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function (event) {
var requesUrl = this.data.requesUrl + "?start=0&count=20";
this.data.movies = {};
this.data.isEmpty = true;
util.http(requesUrl, this.processDoubanData);
wx.showNavigationBarLoading();
},

//星级评分,电影名,海报,评分,ID
processDoubanData: function (moviesDouban) {
var movies = [];
for (var idx in moviesDouban.subjects) {
var subject = moviesDouban.subjects[idx];
var title = subject.title;
if (title.length >= 6) {
title = title.substring(0, 6) + "...";
}
var temp = {
stars: util.convertToStarsArray(subject.rating.stars),
title: title,
average: subject.rating.average,
coveragUrl: subject.images.large,
movieId: subject.id
}
movies.push(temp)
}
//豆瓣API数据,数据合并。(下拉刷新)
var totalMovies = {};
if (!this.data.isEmpty) {
totalMovies = this.data.movies.concat(movies);
}
else {
totalMovies = movies;
this.data.isEmpty = false;
}
//console.log(movies)
this.setData({
movies: totalMovies
});
this.data.totalCount += 20;
wx.hideNavigationBarLoading();
wx.stopPullDownRefresh();
},

/**
* 生命周期函数--监听页面初次渲染完成
*/
//电影排行页面标题。
onReady: function (event) {
wx.setNavigationBarTitle({
title: this.data.navigationbartitle,
success: function (res) {
}
})
},
// 电影页面详情
onMovieTap: function (event) {
var movieId = event.currentTarget.dataset.movieid;
wx.navigateTo({
url: '../movie-detail/movie-detail?id=' + movieId
})
},

/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {

}
})
pages/movies/more-movies/more-movies.josn
1
2
3
4
{
//开启下拉刷新,因微信原因要到josn申明下。
"enablePullDownRefresh": true
}
pages/movies/more-movies/more-movies.wxss
1
@import "../movie-grid/movie-grid-template.wxss";

电影详情页面

movies-details

CODE

pages/movies/movie-detail/movie-detail.wxml
<import src="../stars/stars-template.wxml" />
<view class="md-container">
  <image class="head-img" src="{{movie.movieImg}}" mode="aspectFill" />
  <view class="head-img-hover" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg">
    <text class="main-title">{{movie.title}}</text>
    <text class="sub-title">{{movie.country + " . " + movie.year}}</text>
    <view class="like">
      <text class="highlight-font">{{movie.wishCount}}</text>
      <text class="plain-font">人喜欢</text>
      <text class="highlight-font">{{movie.commentCount}}</text>
      <text class="plain-font">条评论</text>
    </view>
  </view>
  <image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"></image>
  <view class="summary">
    <view class="original-title">
      <text>{{movie.originalTitle}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">评分</text>
      <template is="starsTemplate" data="{{stars:movie.stars, score:movie.score}}" />
    </view>
    <view class="flex-row">
      <text class="mark">导演</text>
      <text>{{movie.director.name}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">影人</text>
      <text>{{movie.casts}}</text>
    </view>
    <view class="flex-row">
      <text class="mark">类型</text>
      <text>{{movie.generes}}</text>
    </view>
  </view>
  <view class="hr"></view>
  <view class="synopsis">
    <text class="synopsis-font">剧情简介</text>
    <text class="summary-content">{{movie.summary}}</text>
  </view>
  <view class="hr"></view>
  <view class="cast">
    <text class="cast-font"> 影人</text>
    <scroll-view class="cast-imgs" scroll-x="true" style="width:100%">
      <block wx:for="{{movie.castsInfo}}" wx:for-item="item">
        <view class="cast-container">
          <image class="cast-img" src="{{item.img}}"></image>
          <text class="cast-name">{{item.name}}</text>
        </view>
      </block>
    </scroll-view>
  </view>
</view>

pages/movies/movie-detail/movie-detail.js
var util = require("../../../utils/util.js");
var app = getApp();

Page({
 //初始化上个页面提取的数据 
  data: {
    movie:{}
  },
  onLoad: function (options) {
    var movieId = options.id;
    var url = app.globalData.doubanBase + "/v2/movie/subject/" + movieId;
    util.http(url,this.processDoubanData);
  },

  // 从豆瓣API,提取有用数据。
  processDoubanData:function(data){
    if (!data) {
      return;
    }
    //某些情况下可能会出现某些数据为空,可能导致乱码用if判断下。一下为举例。
    var director = {
      avatar: "",
      name: "",
      id: ""
    }
    if (data.directors[0] != null) {
      if (data.directors[0].avatars != null) {
        director.avatar = data.directors[0].avatars.large

      }
      director.name = data.directors[0].name;
      director.id = data.directors[0].id;
    }
    var movie = {
      movieImg: data.images ? data.images.large : "",
      country: data.countries[0],
      title: data.title,
      originalTitle: data.original_title,
      wishCount: data.wish_count,
      commentCount: data.comments_count,
      year: data.year,
      generes: data.genres.join("、"),
      stars: util.convertToStarsArray(data.rating.stars),//调用全局js中人名“/”隔开
      score: data.rating.average,
      director: director,
      casts: util.convertToCastString(data.casts),
      castsInfo: util.convertToCastInfos(data.casts),
      summary: data.summary
    }
    this.setData({
      movie:movie
    })
  },
  // 影片海报预览
  viewMoviePostImg:function(event){
    wx.previewImage({
      current: this.data.movie.movieImg , // 当前显示图片的http链接
      urls: [this.data.movie.movieImg] // 需要预览的图片http链接列表
    })
  },
})
pages/movies/movie-detail/movie-detail.josn
{}
pages/movies/movie-detail/movie-detail.wxss
@import "../stars/stars-template.wxss";

.movie-container {
  display: flex;
  flex-direction: column;
  padding: 0 22rpx;
}

.movie-img {
  width: 200rpx;
  height: 270rpx;
  padding-bottom: 20rpx;
}

.movie-title {
  margin-bottom: 16rpx;
  font-size: 24rpx;
}

坚持原创技术分享,您的支持将鼓励我继续创作!