今天我们来编写整个豆瓣评分的首页界面框架。
效果图如下:
我们今天主要讲解界面的编写,目的是再一次加强对模板的理解。我们还是拿index文件修改。
先去掉原有的元素。
修改app.wxss
接下来进入今天你的主题。
首先我们来修改一下标题和APP的主题色。修改整个app共同的都在app的相关文件中。我们修改app.json文件
接下来我们编写下面的搜索框,其实这里搜索框的功能仅仅是一个按钮。但是因为后面也有其他页面有,所以我们还是把它写成一个模板。
在pages/public/tpl中新建searchBtn.wxml和searchBtn.wxss
searchBtn.wxml
searchBtn.wxss
运行效果:
详细的过程就不写了,反正就是先确定有多少个元素,然后先往页面上放元素,然后确定布局,最后调整细节。
在pages/public/tpl中新建movielist.wxml和movielist.wxss
movielist.wxml
movielist.wxss
将movielist模板加到index中
在index.js中构造假数据(假数据小能手)
运行效果如下:
这节课的内容就到这里结束了。
感谢您的阅读。