從微信小程序開(kāi)發(fā)教程-從零開(kāi)始（1）中我們學(xué)會(huì)了怎么搭建一個(gè)微信小程序的框架以及顯示一個(gè)文章列表，這篇文章我將講解列表的點(diǎn)擊以及UI的優(yōu)化，達(dá)到一個(gè)我們預(yù)期的一種效果。

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

allluckly.cn

詳情頁(yè)的話，我們暫時(shí)隨便搭建一下，主要是看下怎么做跳轉(zhuǎn)。
首先我們?cè)谠斍轫?yè)面隨便寫(xiě)點(diǎn)東西，代碼如下：

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

這樣的話在外面的詳情頁(yè)會(huì)顯示666666這些個(gè)字樣，然后我們?cè)趇ndex.wxml中寫(xiě)跳轉(zhuǎn)的代碼，主要代碼如下：

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

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

blog.allluckly.cn

運(yùn)行一下，可以瞧瞧效果如下。

Untitled.gif

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

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

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

navigator{ overflow: hidden;}

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

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

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

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

blog.allluckly.cn.png

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

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

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

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

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

blog.allluckly.cn.gif

有空的話再寫(xiě)寫(xiě)網(wǎng)絡(luò)請(qǐng)求方面的，結(jié)合這個(gè)demo寫(xiě)

本文為Bison原創(chuàng)，轉(zhuǎn)載請(qǐng)注明出處，否則將追究法律責(zé)任