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

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

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

时间: 2024-11-05 23:26:58

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

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

1.首页欢迎界面 项目目录结构 新建项目ReaderMovie,然后新建文件,结构如下 welcome.wxml <view class='container'> <image class='user-avatar' src="/images/avatar/4.png"></image> <text class='user-name'><text style='color:blue'>Hello</text>,八月

【练手项目总结】构建一个集阅读和电影资讯为一体的小程序

本项目是一个集阅读和电影资讯为一体的微信小程序主要分为启动页,阅读部分和电影部分3大块.以下是这次项目的总结: GitHub地址:https://github.com/wkx1214108696/FirstApplets.git 启动页 页面布局:自适应的rpx和flex进行布局(之后所有的页面都是用flex布局) 使用`wx.switchTab(Object object)`跳转至阅读和电影资讯页面,设置了tab选项卡的部分必须使用`wx.switchTab(Object object)` 阅

微信小程序实战教程

微信小程序实战教程(第1篇) 课程观看地址:http://www.xuetuwuyou.com/course/154 课程出自学途无忧网:http://www.xuetuwuyou.com 课时1:1.开篇 课时2:2.文档概览  课时3:3.认识小程序  课时4:4.小程序设计指南 课时5:5.响应的数据绑定  课时6:6.微信小程序游戏的演示  课时7:7.基础组件 课时8:8.view 课时9:9.文件结构  课时10:10.配置  课时11:11.逻辑层  课时12:12.注册小程序 

微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)

我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示: 在宝贝详情页里: 在购物车里: 现在就为大家介绍这个小组件,在小程序中,该如何去写 下图为本项目的图: wxml: <!-- 主容器 --> <view class="stepper"> <!-- 减号 --> <text class="{{minusStatus}}" bindtap="bindMinus">-</text&

微信小程序实战之天气预报

原文:微信小程序实战之天气预报 这个案例是仿UC中天气界面做的中间也有点出入,预留了显示当前城市名字和刷新图标的位置,自己可以写下,也可以添加搜索城市.值得注意的是100%这个设置好像已经不好使了,可以通过获取设备的高度通过数据绑定设置高度.地址:https://github.com/shuncaigao/Weather 界面主要分为四部分: 第一部分 这里是预留的一块可以自行添加补充下 <view class="newTopView"> <!--左边添加当前城市名字

微信小程序实战之百思不得姐精简版

原文:微信小程序实战之百思不得姐精简版 微信小程序基本组件和API已撸完,总归要回到正题的,花了大半天时间做了个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块.这篇就带着大家简述下这个小的APP,源码会放到GitHub上欢迎star. 地址: https://github.com/shuncaigao/BS 项目中我能学到什么? tabbar使用方式 网络调用真实接口 loading使用 scroll-view实现下拉刷新上拉加载 image组件对图片的处理, 音乐和视频组件的使用 跳

微信小程序商店 | 即速商店_团购类小程序

即速应用商店-分类最齐全的小程序商店,收录当前最新最热门小程序,汇集各行业小程序案例及评测,在这里可以轻松找到各种实用好玩的小程序,也可 免费发布 自己的小程序获取 巨大流量 . PS:关于微信小程序商店_即速商店?   如何免费发布微信小程序,获取流量? 微信小程序商店|即速商店_团购小程序 要求:该类目下提交的微信小程序须具备购物.团购相关属性.如小程序内发布虚假违法信息,由小程序主体承担.点击 > 即刻提交 < 本期团购小程序推荐: ? 网易一起拼lite 测评:网易一起拼小程序只做优质

微信小程序再添能力:搜一搜增加小程序入口

随着移动互联网的快速发展,流量正悄然的变成大数据,借助"入口+流量"模式,互联网激活了大量的个性化入口,积累了巨量流量,并形成高企的资本市场估值.小程序作为当前最新的应用模式,在微信不断开放入口之后,或将迎来流量的爆发期. 今天,笔者发现,微信又为小程序开放了一个超级入口:微信搜一搜增添小程序入口.用户在微信发现中,通过搜一搜 输入关键词,比如水果,搜索页面便会出现相关小程序推荐,点击更多,可直接进入小程序"水果"的搜索页面,相关小程序都会出现在页面中. 点击微信搜

微信小程序赚钱方法大全|都是谁适合利用小程序进行商业盈利?

微信小程序上线已经一年多的时间,小程序的入口也在不断的增加,功能也不断你的进行着迭代,很多创业者都看到了其中的创业商机,希望能抓住小程序这样的一波红利.但是如何能抓住小程序这波红利呢,如何切入微信小程序呢,现在小编和大家进行总结一下,进行全面分析,希望能给到大家想要的答案. 小程序商店 也就是"小程序聚合平台".前期收录所有小程序,进行免费展示.待知名度.访问量和转化量做起来后,转为收费模式(摊位费.推广费),如 速成应用. 本地服务 针对提供本地服务的商家或有众有品牌连锁加盟门店,利