全棧工程師之路-中級篇之小程序開發-第二章第三節小程序豆瓣評分主頁

今天我們來編寫整個豆瓣評分的首頁界面框架。

效果圖如下：

我們今天主要講解界面的編寫，目的是再一次加強對模板的理解。我們還是拿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_