這篇文章我將講解列表的點擊以及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;
}

最后我們運行一下看下結果如何：