今天我们来编写整个豆瓣评分的首页界面框架。
效果图如下:
我们今天主要讲解界面的编写,目的是再一次加强对模板的理解。我们还是拿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_