小程序之模板嵌套

在开发一个page之前首先规划好组件的组成

能复用的东西最好都弄成组件形式

组件的套用一般这样的

//星星评分组件，最底层组件
<template name="starsTemplate">
  <view class='stars-container'>
    <view class='stars'>
    <block wx:for="{{stars}}" wx:for-item="i">
    <image class='star-img' src="{{i?'/images/icon/star.png':'/images/icon/none-star.png'}}"></image>
    </block>
    </view>
    <text class='star-score'>{{score}}</text>
  </view>
</template>

 

//单个电影组件

<!-- //注意斜杠不能丢 -->
//这样去引用星星组件
<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>

//css要这样引用，不要忘记分号

@import '../stars/stars-template.wxss';
.movie-container{
  display: flex;
  flex-direction: column;
  padding: 0 22rpx;
}

传递数据时，是从大组件往小组件一层一层传递

//movies组件是最外层组件，向他里面的组件传递数据
//用data="{{...data}}"的形式，...表示展开的意思，在他下面的组件可直接使用内部属性

<import src="movie-item/movie-item.wxml"/>
<view class='container'>
  <view class='movies-view'>
   <template 
   is="movieItemTemplate"
   data = "{{...inTheatersUrl}}"
   ></template>
  </view>
  <view  class='movies-view'>
   <template 
   is="movieItemTemplate"
   data = "{{...comingSoonUrl}}"
   ></template>
  </view>
  <view  class='movies-view'>
   <template 
   is="movieItemTemplate"
    data = "{{...top250Url}}"
   ></template>
  </view>
</view>