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

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";

预览

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web

慕课网javascript 进阶篇 第十章 编程练习

13110
来自专栏河湾欢儿的专栏

网页布局类型

1.定宽布局 2.响应式布局 流式布局(就像水一样,其实就是按照百分比布局 https://m.jd.com/ http://m.sohu.com/) ...

22130
来自专栏雨尘分享

iOS 动画基础总结篇

25350
来自专栏HTML5学堂

随心所欲的滚动条,远离产品汪(二)

还记得上周咱们说的“随心所欲滚动条,远离产品汪”一文吗?当中介绍了自定义滚动条的基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条的上下拖动来控制内容区...

43180
来自专栏菩提树下的杨过

ExtJs学习笔记(11)_Absolute布局和Accordion布局

ExtJs其实在某种程度上可以代替div+css来进行页面布局(不过经测试,在最新的Firefox3下,部分功能好象有点问题),今天我们来学习二种最基本的布局 ...

19760
来自专栏地方网络工作室的专栏

CSS3 做一个有闪光效果的进度条

CSS3 做一个有闪光效果的进度条 今天刚入职的小前端看到一个进度条的效果,想要实现,但是不知道如何下手,于是,我写了一个demo给它看下。 最终效果:CSS3...

29380
来自专栏帘卷西风的专栏

cocos2dx用checkbox实现单选框和button实现table按钮

转载请注明出处:帘卷西风的专栏(http://blog.csdn.net/ljxfblog)

11010
来自专栏一个小程序员的成长笔记

CSS深入理解学习笔记之absolute

1、absolute和float   拥有相同的特性表现:     ①包裹性(容器应用之后,可以包裹里面的内容); 1 <!doctype html> 2 ...

35940
来自专栏编程

前端学习自学笔记:day06

今天是第六天的笔记,主要是HTML和CSS的,希望大家支持~ ? 在此之前先为大家显示下前端工程师的路线图: ? 第六天的笔记:HTML AND CSS: te...

22950
来自专栏超然的博客

弹窗细节

  浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。

10730

扫码关注云+社区

领取腾讯云代金券