zoukankan      html  css  js  c++  java
  • 微信小程序实战–集阅读与电影于一体的小程序项目(六)

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

    预览

  • 相关阅读:
    ububtu 14.04 问题集合
    ubuntu grub 引导修复
    Ubuntu 下 glpk 的安装及使用
    ubuntu vim 7.4 编译安装
    ubuntu 12.04 clang 3.4 安装
    CMakeLists实战解读--YouCompleteMe
    Flume安装及部署
    SpringBoot整合kafka
    linux安装kafka
    Linux安装zookeeper
  • 原文地址:https://www.cnblogs.com/derek1184405959/p/9500988.html
Copyright © 2011-2022 走看看