這篇文章我將講解列表的點擊以及UI的優(you) 化，達到一個(ge) 我們(men) 預期的一種效果。
首先我們(men) 創建一個(ge) 詳情的界麵所需的文件,如下圖所示:
詳情頁的話，我們(men) 暫時隨便搭建一下，主要是看下怎麽(me) 做跳轉。
首先我們(men) 在詳情頁麵隨便寫(xie) 點東(dong) 西，代碼如下：
<!--detail.wxml-->
<view class="container">
666666
</view>
這樣的話在外麵的詳情頁會(hui) 顯示666666這些個(ge) 字樣，然後我們(men) 在index.wxml中寫(xie) 跳轉的代碼，主要代碼如下：
<navigator url="navigate?title=navigate" hover-class="navigator-hover">
跳轉到新頁麵
</navigator>
其中url為(wei) 應用內(nei) 的跳轉鏈接title=navigate為(wei) 傳(chuan) 過去的字段hover-class指定點擊時的樣式類，當hover-class=”none”時，沒有點擊態效果.完整的代碼如下圖框起來的地方
運行一下，可以瞧瞧效果如下。
由圖可以看出跳轉的功能已經做好了，下麵我們(men) 開始優(you) 化一下首頁的UI 優(you) 化UI 的話主要是在index.wxss中，根據每個(ge) 控件的class名來寫(xie) 相應的設置。 首先我們(men) 把整個(ge) 頁麵做一下設置，代碼如下：
/**index.wxss**/
.list {
height: 100%;
display: flex;
flex-direction: column;
padding: 20rpx;
}
padding為(wei) 內(nei) 邊框，首頁整個(ge) 的class名為(wei) list，所以用.list{}來設置。然後設置一下navigator塊，再然後來設置我們(men) 的每一個(ge) 列表，在這裏我把它命名為(wei) cell，看上去對於(yu) ioses開發來說親(qin) 切一點。具體(ti) 代碼如下：
navigator{ overflow: hidden;}.cell{
margin-bottom: 20rpx;
height: 200rpx;
position: relative;
}
再然後我們(men) 設置cell中圖片的位置，具體(ti) 代碼如下：
.imgs{
float: right;
}
.imgs image {
display: block;
width: 200rpx;
height: 200rpx;
}
由代碼可以看出，我們(men) 的圖片設置了向右對齊，寬和高分別設置了200rpx，我們(men) 運行一下看看效果圖片是否已經改變了。
相對於(yu) 我們(men) 的效果圖的圖片部分，應該已經差不多就是這個(ge) 樣子了，下麵讓我們(men) 再調一調標題以及其他部分UI 的調試。 我們(men) 把其他部分的UI都放在class=”infos”; 首先我們(men) 先調這一大塊的布局，代碼如下：
.infos {
float: left;
width: 480rpx;
height: 200rpx;
padding: 20rpx 0 0 20rpx;
}
然後設置裏麵的每一個(ge) 小部件，代碼如下：
.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;
}
最後我們(men) 運行一下看下結果如何：
服務項目
網站首頁
TEL：021-61554458
立即谘詢