边做边学入门微信小程序之仿豆瓣评分 (10)

在block.wxml中写入:

<!--pages/movies/block/block.wxml-->
<!--导入电影海报模板-->
<import src=http://www.likecs.com/"../poster/poster.wxml" />
<view>
<!--区块顶栏-->
<view class=http://www.likecs.com/'block-title-bar'>
<!--类别标题,如正在热映-->
<text class=http://www.likecs.com/'block-title'>{{blockTitle}}</text>
<view class=http://www.likecs.com/'block-more' catchtap=http://www.likecs.com/'catchMore' data-title=http://www.likecs.com/'{{blockTitle}}'>
<!--更多-->
<text class=http://www.likecs.com/'block-more-text'>更多</text>
<!--右箭头-->
<image class=http://www.likecs.com/'block-more-icon' src=http://www.likecs.com/'/images/block/arrow-right.png'></image>
</view>
</view>
<!--电影海报展示条-->
<scroll-view scroll-x=http://www.likecs.com/"{{true}}" class=http://www.likecs.com/'block-scroll-view'>
<view class=http://www.likecs.com/'block-movie-row'>
<block wx:for=http://www.likecs.com/"{{blockMovies.subjects}}" wx:for-item=http://www.likecs.com/"poster">
<!--单个电影海报-->
<view class=http://www.likecs.com/'block-movie-card'>
<template is=http://www.likecs.com/"template-poster" data=http://www.likecs.com/"{{...poster}}" />
</view>
</block>
</view>
</scroll-view>
</view>

按Ctrl+S保存后,模拟器效果如下。第一个出现了电影名称过长的情形,我们后续会写一个stringUtil.js的工具类来截断。

 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsfjgx.html