微信小程序開發教程-從零開始（2）

從微信小程序開發教程-從零開始（1）中咱們學會了怎麼搭建一個微信小程序的框架以及顯示一個文章列表，這篇文章我將講解列表的點擊以及UI的優化，達到一個咱們預期的一種效果。

首先咱們建立一個詳情的界面所需的文件,以下圖所示:

詳情頁的話，咱們暫時隨便搭建一下，主要是看下怎麼作跳轉。
首先咱們在詳情頁面隨便寫點東西，代碼以下：

<!--detail.wxml-->
<view class="container">
666666
</view>複製代碼

這樣的話在外面的詳情頁會顯示666666這些個字樣，而後咱們在index.wxml中寫跳轉的代碼，主要代碼以下：

<navigator url="navigate?title=navigate" hover-class="navigator-hover">
跳轉到新頁面
</navigator>複製代碼

其中url爲應用內的跳轉連接title=navigate爲傳過去的字段hover-class指定點擊時的樣式類，當hover-class="none"時，沒有點擊態效果.完整的代碼以下圖框起來的地方

運行一下，能夠瞧瞧效果以下。

由圖能夠看出跳轉的功能已經作好了，下面咱們開始優化一下首頁的UI
優化UI 的話主要是在index.wxss中，根據每一個控件的class名來寫相應的設置。
首先咱們把整個頁面作一下設置，代碼以下：

/**index.wxss**/
.list {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}複製代碼

padding爲內邊框，首頁整個的class名爲list，因此用.list{}來設置。而後設置一下navigator塊，再而後來設置咱們的每個列表，在這裏我把它命名爲cell，看上去對於iOS開發來講親切一點。具體代碼以下：

navigator{ overflow: hidden;}

.cell{
  margin-bottom:  20rpx;
  height: 200rpx;
  position: relative;
}複製代碼

再而後咱們設置cell中圖片的位置，具體代碼以下：

.imgs{
  float: right;
}
.imgs image { 
  display: block;
  width: 200rpx;
  height: 200rpx;
}複製代碼

由代碼能夠看出，咱們的圖片設置了向右對齊，寬和高分別設置了200rpx，咱們運行一下看看效果圖片是否已經改變了。

相對於咱們的效果圖的圖片部分，應該已經差很少就是這個樣子了，下面讓咱們再調一調標題以及其餘部分UI 的調試。
咱們把其餘部分的UI都放在class="infos"; 首先咱們先調這一大塊的佈局，代碼以下：

.infos {
  float: left; 
  width: 480rpx;
  height: 200rpx;
  padding: 20rpx 0 0 20rpx;
}複製代碼

而後設置裏面的每個小部件，代碼以下：

.title {font-size: 20px;}

.date {
  padding-top: 50rpx;
  float: right;
  font-size: 16px;
  color: #aaa;
  position: relative;

}
.classification{
  padding-top: 50rpx;
  font-size: 16px;
  color: #aaa;
  position: relative;
}複製代碼

最後咱們運行一下看下結果如何：

有空的話再寫寫網絡請求方面的，結合這個demo寫

本文爲Bison原創，轉載請註明出處，不然將追究法律責任

首發連接
第一時間收到文章推送