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

标签：alc   amp   import   eve   roc   分享图片   加载更多   RoCE   ons   

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

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

标签：alc   amp   import   eve   roc   分享图片   加载更多   RoCE   ons   

原文地址：https://www.cnblogs.com/derek1184405959/p/9500988.html