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

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.w

 <view class=\"more\" catchtap=\'onMoreTap\' data-category=\"{{category }}\">
          <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({

   : function (options) {
    var category = options.category;
    console.log(category);
  },
})

分别点击更多，可以看到对应的分类

25.动态设置导航栏标题

more-movie.js

// pages/movies/more-movie/more-movie.js
Page({
  data:{
    category : \'\',
  },
   : function (options) {
    var category = options.category;
    this.data.category  = category;
    console.log(category);
  },
  onReady: function () {
    wx.setNavigationBar ({
       : this.data.category ,
    })
  },
})

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:{
    category : \'\',
    movies: {},
  },
   : function (options) {
    var category = options.category;
    this.data.category  = category;
    var dataUrl = \'\'
    switch (category) {
      case \"正在热映\":
        dataUrl = app.globalData.g_ Url + \"/v2/movie/in_theaters\";
        break;
      case \"即将上映\":
        dataUrl = app.globalData.g_ Url + \"/v2/movie/coming_soon\";
        break;
      case \"豆瓣Top250\":
        dataUrl = app.globalData.g_ Url + \"/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   = subject. ;
      if ( .length >= 6) {
          =  .substring(0, 6) + \"...\";
      }
      var temp = {
        stars: util.convertToStarArray(subject.rating.stars),
         :  ,
        average: subject.rating.average,
        coverageUrl: subject.images.large,
        movieId: subject.id
      }
      movies.push(temp)
    }
    this.setData({
      movies: movies
    });
  },

  onReady: function () {
    wx.setNavigationBar ({
       : this.data.category ,
    })
  },
})

movie-grid-template.w

<import src=\"../movie/movie-template.w \" />
<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.w

<import src=\"../movie-grid/movie-grid-template.w \" />
<template is=\"movieGridTemplate\" data=\"{{movies}}\" />

more-movie.wxss

@import \"../movie-grid/movie-grid-template.wxss\";

预览

27.实现上滑加载更多数据

movie-grid-template.w

<import src=\"../movie/movie-template.w \" />
<template name=\"movieGridTemplate\">
  <scroll-view class=\"grid-container\" scroll-y=\"true\" scroll-x=\"false\" bindscrolltolower=\" Lower\">
    <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:{
    category : \'\',
    movies: {},
    requsetUrl: \'\',
    isEmpty: true,
    totalCount: 0
  },
   : 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;
  },

   Lower:function(event){
    var nextUrl = this.data.requsetUrl + 
    \"?start=\" + this.data.totalCount + \"&count=20\";
    util.http(nextUrl,this.processDoubanData)
  },