全栈工程师之路-中级篇之小程序开发-第二章第三节小程序豆瓣评分主页

今天我们来编写整个豆瓣评分的首页界面框架。

效果图如下：

我们今天主要讲解界面的编写，目的是再一次加强对模板的理解。我们还是拿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{
   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;
   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_