從微信小程序開(kāi)發(fā)教程-從零開(kāi)始（1）中我們學(xué)會(huì)了怎么搭建一個(gè)微信小程序的框架以及顯示一個(gè)文章列表，這篇文章我將講解列表的點(diǎn)擊以及UI的優(yōu)化，達(dá)到一個(gè)我們預(yù)期的一種效果。
首先我們創(chuàng)建一個(gè)詳情的界面所需的文件,如下圖所示:
詳情頁(yè)的話，我們暫時(shí)隨便搭建一下改基，主要是看下怎么做跳轉(zhuǎn)。
首先我們?cè)谠斍轫?yè)面隨便寫點(diǎn)東西咖为，代碼如下：
<!--detail.wxml-->
<view class="container">
666666
</view>
這樣的話在外面的詳情頁(yè)會(huì)顯示666666這些個(gè)字樣秕狰，然后我們?cè)趇ndex.wxml中寫跳轉(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í)的樣式類躁染，當(dāng)hover-class="none"時(shí)鸣哀，沒(méi)有點(diǎn)擊態(tài)效果.完整的代碼如下?圖框起來(lái)的地方
運(yùn)行一下，可以瞧瞧效果如下吞彤。
由圖可以看出跳轉(zhuǎn)的功能已經(jīng)做好了我衬，下面我們開(kāi)始優(yōu)化一下首頁(yè)的UI
優(yōu)化UI 的話主要是在index.wxss中，根據(jù)每個(gè)控件的class名來(lái)寫相應(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)改變了田藐。
相對(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é)果如何：
有空的話再寫寫網(wǎng)絡(luò)請(qǐng)求方面的，結(jié)合這個(gè)demo寫
本文為Bison原創(chuàng)臀稚，轉(zhuǎn)載請(qǐng)注明出處吝岭，否則將追究法律責(zé)任
