美文网首页微信小程序
7-6 电影页面嵌套template分析

7-6 电影页面嵌套template分析

作者: 留白_汉服vs插画 | 来源:发表于2017-11-24 09:25 被阅读11次

    快速新建页面

    直接在app.json的pages[ ]里面添加新页面的路径。四个文件都新建了。

    电影首页效果图:

    导航,搜索,三排电影,会访问豆瓣公开api,一分钟只能访问40次,不要拼命加载。真实加载,真实数据。加载之前还是前后端分离的原则。先把前端样式写好,然后填写数据。wx.  什么什么的访问方法。相当于ajax网络访问api。

    现在movie.wxml中写标签元素组件。

    分析上面图,这么多重复的,更好的方式肯定使用template。

    电影首页有三个重复元素,也就是三行,正在热映,即将上映,和top250(下面没显示出来)。所以这样的每一行,都可以做成一个template。如下。三行,复用三次。

    但是里面的单个电影的样式,又可以在很多地方使用,那么把单个电影也要做成一个template。

    单个电影做成template 在页面中使用单个电影的template

    单个电影中的电影评分组件,依然可以做成一个template。在所有的电影项都可以使用,如下:

    其他地方也可以使用这个电影评分组件:

    因此这是一个三层嵌套使用的template。

    下面把三层组件起一个名字:

    组外层:movieList 、中层:movie、星星:star。

    把下面9宫格一样的电影排布叫movieGread

    相关文章

      网友评论

        本文标题:7-6 电影页面嵌套template分析

        本文链接:https://www.haomeiwen.com/subject/jxotbxtx.html