慕课网-微信小程序入门与实战-常用组件API开发技巧项目实战-第7章开始制作电影资讯页面-3个嵌套template标签的实现

3个嵌套template标签的实现

1.进入目录 pages/movies,新建目录 stars、movie、movie-list

2.进入目录 pages/movies/stars,添加文件 stars-template.wxml、stars-template.wxss

3.进入目录 pages/movies/movie,添加文件 movie-template.wxml、movie-template.wxss

4.进入目录 pages/movies/movie-list,添加文件 movie-list-template.wxml、movie-list-template.wxss

5.进入目录 pages/movies/stars,修改文件 stars-template.wxml

<template name="starsTemplate">
    <view>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <image src="/images/icon/star.png"></image>
      <text></text>
    </view>
</template>

6.进入目录 pages/movies/movie,修改文件 movie-template.wxml 

<import src="../stars/stars-template.wxml" />
<template name="movieTemplate">
  <view>
    <image src="/images/yourname.png"></image>
    <text>你的名字.</text>
    <template is="starsTemplate"/>
  </view>
</template>

7.进入目录 pages/movies/movie-list,修改文件 movie-list-template.wxml

<import src="../movie/movie-template" />
<template name="movieListTemplate">
  <view>
    <view>
      <text>正在热映</text>
      <view>
        <text>更多</text>
        <image src="/images/icon/arrow-right.png"></image>
      </view>
    </view>
    <template is="movieTemplate"/>
    <template is="movieTemplate"/>
    <template is="movieTemplate"/>
  </view>
</template>

8.这里有一个问题就是豆瓣的api链接连接不了

  

 

posted on 2019-12-03 10:15  herisson_pan  阅读(9)  评论(0)    收藏  举报

导航