微信小程序实战–集阅读与电影于一体的小程序项目（六）

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)
  },

28.设置loading状态

more-movie.js

onscrolllower: function (event) {
    var nexturl = this.data.requseturl +
      "?start=" + this.data.totalcount + "&count=20";
    util.http(nexturl, this.processdoubandata);
    wx.shownavigationbarloading()
  },
  
  processdoubandata:function(data){
    .
    .
    
    this.setdata({
      movies: totalmovies
    })
    this.data.totalcount += 20;
    wx.hidenavigationbarloading()
  },

29.实现下拉刷新

more-movie.json

{
  "enablepulldownrefresh": true
}

more-movie.js

onpulldownrefresh: function () {
    var refreshurl = this.data.requseturl +
      "?star=0&count=20";
    this.data.movies = {};
    this.data.isempty = true;
    this.data.totalcount = 0;
    util.http(refreshurl, this.processdoubandata);
    wx.shownavigationbarloading();
  },

  processdoubandata:function(data){
    .
    .
    .
    this.data.totalcount += 20;
    wx.hidenavigationbarloading()
    wx.stoppulldownrefresh()
  },