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

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

效果图以下：

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