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

丶Bison發表於2016-10-18
微信小程式

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

首先我們建立一個詳情的介面所需的檔案,如下圖所示:

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

詳情頁的話，我們暫時隨便搭建一下，主要是看下怎麼做跳轉。
首先我們在詳情頁面隨便寫點東西，程式碼如下：

<!--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"時，沒有點選態效果.完整的程式碼如下圖框起來的地方

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

執行一下，可以瞧瞧效果如下。

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

由圖可以看出跳轉的功能已經做好了，下面我們開始優化一下首頁的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，我們執行一下看看效果圖片是否已經改變了。

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

相對於我們的效果圖的圖片部分，應該已經差不多就是這個樣子了，下面讓我們再調一調標題以及其他部分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;
}複製程式碼

最後我們執行一下看下結果如何：

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

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

本文為Bison原創，轉載請註明出處，否則將追究法律責任

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

相關文章