這篇文章我將講解列表的點擊以及UI的優(yōu)化，達到一個我們預(yù)期的一種效果。

首先我們創(chuàng)建一個詳情的界面所需的文件,如下圖所示:

詳情頁的話，我們暫時隨便搭建一下，主要是看下怎么做跳轉(zhuǎn)。

首先我們在詳情頁面隨便寫點東西，代碼如下：

<!--detail.wxml-->
<view class="container">
666666
</view>

這樣的話在外面的詳情頁會顯示666666這些個字樣，然后我們在index.wxml中寫跳轉(zhuǎn)的代碼，主要代碼如下：

<navigator url="navigate?title=navigate" hover-class="navigator-hover">
跳轉(zhuǎn)到新頁面
</navigator>

其中url為應(yīng)用內(nèi)的跳轉(zhuǎn)鏈接title=navigate為傳過去的字段hover-class指定點擊時的樣式類，當hover-class=”none”時，沒有點擊態(tài)效果.完整的代碼如下圖框起來的地方

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

由圖可以看出跳轉(zhuǎn)的功能已經(jīng)做好了，下面我們開始優(yōu)化一下首頁的UI 優(yōu)化UI 的話主要是在index.wxss中，根據(jù)每個控件的class名來寫相應(yīng)的設(shè)置。 首先我們把整個頁面做一下設(shè)置，代碼如下：

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

padding為內(nèi)邊框，首頁整個的class名為list，所以用.list{}來設(shè)置。然后設(shè)置一下navigator塊，再然后來設(shè)置我們的每一個列表，在這里我把它命名為cell，看上去對于iOS開發(fā)來說親切一點。具體代碼如下：

navigator{ overflow: hidden;}

.cell{
  margin-bottom:  20rpx;
  height: 200rpx;
  position: relative;
}

再然后我們設(shè)置cell中圖片的位置，具體代碼如下：

.imgs{
  float: right;
}
.imgs image { 
  display: block;
  width: 200rpx;
  height: 200rpx;
}

由代碼可以看出，我們的圖片設(shè)置了向右對齊，寬和高分別設(shè)置了200rpx，我們運行一下看看效果圖片是否已經(jīng)改變了。

相對于我們的效果圖的圖片部分，應(yīng)該已經(jīng)差不多就是這個樣子了，下面讓我們再調(diào)一調(diào)標題以及其他部分UI 的調(diào)試。 我們把其他部分的UI都放在class=”infos”; 首先我們先調(diào)這一大塊的布局，代碼如下：

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

然后設(shè)置里面的每一個小部件，代碼如下：

.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;
}

最后我們運行一下看下結(jié)果如何：