21.电影页面数据绑定
movies.js
var app = getApp();Page({ data: { inTheaters: {}, comingSoon: {}, top250: {}, }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var baseUrl = app.globalData.g_baseUrl; var inTheatersUrl = baseUrl +"/v2/movie/in_theaters" + "?start=0&count=3"; var comingSoonUrl = baseUrl + "/v2/movie/coming_soon" + "?start=0&count=3"; var top250Url = baseUrl + "/v2/movie/top250" + "?start=0&count=3"; this.getMovieList(inTheatersUrl, "inTheaters") this.getMovieList(comingSoonUrl, "comingSoon"); this.getMovieList(top250Url, "top250"); }, getMovieList(url, setKey) { var that = this wx.request({ url: url, data: {}, method: ‘GET‘, header: { ‘content-type‘: ‘json‘ // 默认值 application/json }, success: function (res) { console.log(res) that.processDoubanDate(res.data, setKey) } }) }, processDoubanDate: function (moviesDouban, setKey) { var movies = []; for (var idx in moviesDouban.subjects) { var subject = moviesDouban.subjects[idx] var title = subject.title; if (title.length >= 6) { title = title.substring(0, 6) + "..."; } var temp = { title: title, average: subject.rating.average, coverageUrl: subject.images.large, movieId: subject.id } movies.push(temp) } var readyData = {}; readyData[setKey] = { movies: movies } this.setData(readyData); }})
movies.wxml
<import src="movie-list/movie-list-template.wxml" /><view class="container"> <view class="movies-template"> <template is="movielistTemplate" data="{{...inTheaters}}" /> </view> <view class="movies-template"> <template is="movielistTemplate" data="{{...comingSoon}}" /> </view> <view class="movies-template"> <template is="movielistTemplate" data="{{...top250}}" /> </view></view>
movie-list-template.wxml
<import src="../movie/movie-template.wxml" /><template name="movielistTemplate"> <view class="movie-lsit-container"> <view class="inner-container"> <view class="movie-head"> <text class="slogan">正在热映</text> <view class="more"> <text class="more-text">更多</text> <image class="more-img" src="/images/icon/arrow-right.png"></image> </view> </view> <view class="movies-container"> <block wx:for="{{movies}}" wx:for-item="movie"> <template is="movieTemplate" data="{{...movie}}" /> </block> </view> </view> </view></template>
movie-template.wxml
<import src="../stars/stars-template.wxml" /><template name="movieTemplate"> <view class="movie-container"> <image class="movie-img" src=‘{{coverageUrl}}‘></image> <text class="movie-title">{{title}}</text> <template is="starsTemplate" data="{{average}}" /> </view> </template>
预览
22.星星评分组件的实现
utils/util.js
function convertToStarArray(stars) { var num = stars.toString().substring(0, 1) var array = [] for (var i = 1; i <= 5; i++) { if (i <= num) { array.push(1) } else { array.push(0) } } return array;}module.exports = { convertToStarArray: convertToStarArray,};
movies.js
var util = require(‘../../utils/util.js‘)var temp = { stars: util.convertToStarArray(subject.rating.stars), title: title, average: subject.rating.average, coverageUrl: subject.images.large, movieId: subject.id, }
movie.wxml
<import src="../stars/stars-template.wxml" /><template name="movieTemplate"> <view class="movie-container"> <image class="movie-img" src=‘{{coverageUrl}}‘></image> <text class="movie-title">{{title}}</text> <template is="starsTemplate" data="{{stars:stars,score:average}}" /> </view> </template>
stars-template.wxml
<template name="starsTemplate"> <view class="stars-container"> <view class=‘stars‘> <block wx:for="{{stars}}" wx:for-item="i"> <image wx:if="{{i}}" src=‘/images/icon/star.png‘></image> <image wx:else src=‘/images/icon/none-star.png‘></image> </block> </view> <text class="star-score ">{{average}}</text> </view></template>
23.更换电影分类标题
movies.js
this.getMovieList(inTheatersUrl, "inTheaters", "正在热映")this.getMovieList(comingSoonUrl, "comingSoon", "即将上映");this.getMovieList(top250Url, "top250", "豆瓣Top250"); getMovieList(url, setKey, categoryTitle) { . . . success: function (res) { console.log(res) that.processDoubanDate(res.data, setKey,categoryTitle) } }) },processDoubanDate: function (moviesDouban, setKey,categoryTitle) { . . . readyData[setKey] = { movies: movies, categoryTitle: categoryTitle } this.setData(readyData); }
movie-list-template.wxml
<text class="slogan">{{categoryTitle}}</text>
踩
(0)
赞
(0)
举报
评论 一句话评论(0)