作者:Tong_T,來自授權(quán)地址
第九章 電影詳情movie-detail.wxml<import src="../stars/stars-template.wxml" /> <view class="md-container"> <image class="head-img" src="{{movie.movieImg}}" mode="aspectFill" /> <view class="head-img-hover" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"> <text class="main-title">{{movie.title}}</text> <text class="sub-title">{{movie.country + " . " + movie.year}}</text> <view class="like"> <text class="highlight-font">{{movie.wishCount}}</text> <text class="plain-font">人喜歡</text> <text class="highlight-font">{{movie.commentCount}}</text> <text class="plain-font">條評論</text> </view> </view> <image class="movie-img" src="{{movie.movieImg}}" data-src="{{movie.movieImg}}" catchtap="viewMoviePostImg"></image> <view class="summary"> <view class="original-title"> <text>{{movie.originalTitle}}</text> </view> <view class="flex-row"> <text class="mark">評分</text> <template is="starsTemplate" data="{{stars:movie.stars, score:movie.score}}" /> </view> <view class="flex-row"> <text class="mark">導(dǎo)演</text> <text>{{movie.director.name}}</text> </view> <view class="flex-row"> <text class="mark">影人</text> <text>{{movie.casts}}</text> </view> <view class="flex-row"> <text class="mark">類型</text> <text>{{movie.generes}}</text> </view> </view> <view class="hr"></view> <view class="synopsis"> <text class="synopsis-font">劇情簡介</text> <text class="summary-content">{{movie.summary}}</text> </view> <view class="hr"></view> <view class="cast"> <text class="cast-font"> 影人</text> <scroll-view class="cast-imgs" scroll-x="true" style="width:100%"> <block wx:for="{{movie.castsInfo}}" wx:for-item="item"> <view class="cast-container"> <image class="cast-img" src="{{item.img}}"></image> <text class="cast-name">{{item.name}}</text> </view> </block> </scroll-view> </view> </view>
1.其中scroll-view為滾動視圖,分為水平滾動和垂直滾動。注意滾動視圖垂直滾動時一定要設(shè)置高度否則的話scroll-view不會生效。滾動視圖常用的地方一般都是Item項比較多的界面。movie-detail.js在ES6前, 前端就使用RequireJS或者seaJS實現(xiàn)模塊化, requireJS是基于AMD規(guī)范的模塊化庫, 而像seaJS是基于CMD規(guī)范的模塊化庫, 兩者都是為了為了推廣前端模塊化的工具, 更多有關(guān)AMD和CMD的區(qū)別, 后面參考給了幾個鏈接;現(xiàn)在ES6自帶了模塊化, 也是JS第一次支持module, 在很久以后 ,我們可以直接作用import和export在瀏覽器中導(dǎo)入和導(dǎo)出各個模塊了, 一個js文件代表一個js模塊;現(xiàn)代瀏覽器對模塊(module)支持程度不同, 目前都是使用babelJS, 或者Traceur把ES6代碼轉(zhuǎn)化為兼容ES5版本的js代碼。ES6的模塊化的基本規(guī)則或特點: 1:每一個模塊只加載一次, 每一個JS只執(zhí)行一次, 如果下次再去加載同目錄下同文件,直接從內(nèi)存中讀取。 一個模塊就是一個單例,或者說就是一個對象; 2:每一個模塊內(nèi)聲明的變量都是局部變量, 不會污染全局作用域; 3:模塊內(nèi)部的變量或者函數(shù)可以通過export導(dǎo)出; 4:一個模塊可以導(dǎo)入別的模塊 var util = require('../../../../utils/util.js') class Movie { constructor(url) { this.url = url; } getMovieData(cb) { this.cb = cb; util.http(this.url, this.processDoubanData.bind(this)); } processDoubanData(data) { if (!data) { return; } var director = { avatar: "", name: "", id: "" } if (data.directors[0] != null) { if (data.directors[0].avatars != null) { director.avatar = data.directors[0].avatars.large } director.name = data.directors[0].name; director.id = data.directors[0].id; } var movie = { movieImg: data.images ? data.images.large : "", country: data.countries[0], title: data.title, originalTitle: data.original_title, wishCount: data.wish_count, commentCount: data.comments_count, year: data.year, generes: data.genres.join("、"), stars: util.convertToStarsArray(data.rating.stars), score: data.rating.average, director: director, casts: util.convertToCastString(data.casts), castsInfo: util.convertToCastInfos(data.casts), summary: data.summary } this.cb(movie); } } export { Movie } |
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)