全栈工程师之路-中级篇之小程序开发-第二章第三节小程序豆瓣评分主页
2017-08-04 09:41
671 查看
今天我们来编写整个豆瓣评分的首页界面框架。
效果图如下:
我们今天主要讲解界面的编写,目的是再一次加强对模板的理解。我们还是拿index文件修改。
先去掉原有的元素。
修改app.wxss
接下来进入今天你的主题。
首先我们来修改一下标题和APP的主题色。修改整个app共同的都在app的相关文件中。我们修改app.json文件
接下来我们编写下面的搜索框,其实这里搜索框的功能仅仅是一个按钮。但是因为后面也有其他页面有,所以我们还是把它写成一个模板。
在pages/public/tpl中新建searchBtn.wxml和searchBtn.wxss
searchBtn.wxml
详细的过程就不写了,反正就是先确定有多少个元素,然后先往页面上放元素,然后确定布局,最后调整细节。
在pages/public/tpl中新建movielist.wxml和movielist.wxss
movielist.wxml
在index.js中构造假数据(假数据小能手)
运行效果如下:
源文件 百度云 链接:http://pan.baidu.com/s/1nvC4Qdr 密码:0e22
这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。
如果你觉得本文对你有帮助,请扫描文末二维码,支持博主原创。
希望大家关注我的个人公众号ionic_
效果图如下:
我们今天主要讲解界面的编写,目的是再一次加强对模板的理解。我们还是拿index文件修改。
先去掉原有的元素。
修改app.wxss
接下来进入今天你的主题。
首先我们来修改一下标题和APP的主题色。修改整个app共同的都在app的相关文件中。我们修改app.json文件
接下来我们编写下面的搜索框,其实这里搜索框的功能仅仅是一个按钮。但是因为后面也有其他页面有,所以我们还是把它写成一个模板。
在pages/public/tpl中新建searchBtn.wxml和searchBtn.wxss
searchBtn.wxml
<template name="searchBtnTpl"> <view class="searchbtn"> <view class="searchinput"> <icon type="search" size="13" color="#405f80" ></icon> <text>搜索</text> </view> </view> </template>searchBtn.wxss
.searchbtn{ width: 100%; background-color: #44BB57; padding: 10rpx 0; height: 56rpx; display: flex; flex-direction: row; justify-content:center; } .searchinput{ display: flex; flex-direction: row; justify-content:center; background-color: white; border-radius: 5px; width: 96%; } .searchinput icon{ margin: auto 0 ; color: #B4B4B4; } .searchinput text{ margin: auto 0 ; margin-left: 10rpx; font-size: 28rpx; color: #B4B4B4; }运行效果:
详细的过程就不写了,反正就是先确定有多少个元素,然后先往页面上放元素,然后确定布局,最后调整细节。
在pages/public/tpl中新建movielist.wxml和movielist.wxss
movielist.wxml
<import src="moviecard.wxml"/> <template name="movielistTpl"> <view class="movielistpanel"> <view class="movietitle"> <text>{{movielistName}}</text> <text class="moviemost">更多></text> </view> <view class="movielist"> <block wx:for="{{movielist}}" wx:key="item"> <template is="moviecardTpl" data="{{...item}}"></template> </block> </view> </view> </template>movielist.wxss
@import "moviecard.wxss"; .movielistpanel{ margin-bottom: 20rpx; background-color: white; } .movietitle{ display: flex; flex-direction: row; justify-content:space-between; padding: 20rpx; } .moviemost{ font-size: 26rpx; color: #44BB57; margin: auto 0; } .movielist{ display: flex; flex-direction: row; flex-wrap:nowrap; }将movielist模板加到index中
在index.js中构造假数据(假数据小能手)
运行效果如下:
源文件 百度云 链接:http://pan.baidu.com/s/1nvC4Qdr 密码:0e22
这节课的内容就到这里结束了。
感谢您的阅读。
我是莽夫,希望你开心。
如果你觉得本文对你有帮助,请扫描文末二维码,支持博主原创。
希望大家关注我的个人公众号ionic_
相关文章推荐
- 全栈工程师之路-中级篇之小程序开发-第一章第一节注册小程序
- 全栈工程师之路-中级篇之小程序开发-第二章第五节小程序中的Promise
- 全栈工程师之路-中级篇之小程序开发-第三章第五节获取用户权限、下载文件、保存到相册、用户拒绝授权重新授权
- 全栈工程师之路-中级篇之小程序开发-第一章第三节阅读官方demo
- 全栈工程师之路-中级篇之小程序开发-第二章第四节小程序http请求与请求本地json文件
- 全栈工程师之路-中级篇之小程序开发-第二章第二节小程序电影卡片模板
- 全栈工程师之路-中级篇之小程序开发-第二章第一节小程序的模板-评分星星模板
- 全栈工程师之路-中级篇之小程序开发-第三章第二节小程序下拉刷新,上拉加载
- 微信小程序教学第四章第三节(含视频):小程序中级实战教程:详情-功能完善
- 袁峰:我的程序开发之路
- Java中级开发工程师知识点归纳
- [黑莓开发之路][01][黑莓开发平台介绍][03][Rapid Application Development][快速程序开发]
- 全栈工程师的学习之路
- 使用野狗做后端,开发微信小程序不需要后端工程师,前端自己就可以搞定了
- 全栈开发工程师,就是个神话~【转载+整理】
- 长期招聘 .Net(BS方向) 中级,高级软件开发工程师
- Android中级第四讲--相机程序开发
- 全栈工程师之路-中级篇之小程序开发-第三章第三节正在加载,loading状态
- tp5微信小程序全栈开发 十一——前端框架构建与令牌管理,首页、专题、分类等模块编写
- 广州一家知名企业诚招【全栈开发工程师】