微信開發(fā)者工具的使用我們就不一一贅述了,下面直接看需要繪制的頁面。思路:整個頁面分為頭部和內(nèi)容2大模塊,頭部又可以分為左右2個部分,將右邊的部分設(shè)置成行內(nèi)樣式就能讓圖片和 ...
微信開發(fā)者工具的使用我們就不一一贅述了,下面直接看需要繪制的頁面。
思路:整個頁面分為頭部和內(nèi)容2大模塊,頭部又可以分為左右2個部分,將右邊的部分設(shè)置成行內(nèi)樣式就能讓圖片和文字顯示在一行,右邊的位置可以通過相對定位進(jìn)行微調(diào)。
內(nèi)容部分基本上沒一個模塊(cell)都是一樣的,可以使用for循環(huán)創(chuàng)建。樣式的設(shè)置思路和頭部的思路基本一致。
下面是WXML:
WXML中的userInfo和titleArr,imageArr,是js中已經(jīng)綁定好的數(shù)據(jù),下面是js中的demo
最后來看看樣式的設(shè)置部分
/*頭部信息*/
.lineView{
background-color: lightgrey;
width: 100%;
height: 20rpx;
}
.header,.my-cell{
position: relative;
}
.header-right,.my-cell-right{
display: inline-block;
overflow: hidden;
margin-left: 20rpx;
line-height: 40rpx;
font-size: 30rpx;
position: absolute;
top: 50rpx;
}
.header image{
width: 120rpx;
height: 120rpx;
background-size: cover;
border-radius: 60rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
margin-left: 30rpx;
}
/*內(nèi)容*/
.my-cell-right{
top: 44rpx;
}
.my-cell image{
width: 40rpx;
height: 40rpx;
margin: 40rpx 40rpx;
}
.my-cell-line{
background-color: lightgrey;
width: 700rpx;
height: 2rpx;
margin-top: 40rpx;
}
今天做的是這個頁面
先說一下頂部的注意點(diǎn):頂部的導(dǎo)航欄的創(chuàng)建
分別給熱門笑話和經(jīng)典笑話綁定不同的事件,通過點(diǎn)擊改變js中聲明的currentSelectedNavBar 變量,再通過這個變量的值改變?nèi)ジ淖兛丶腸lass屬性,從而可以重新設(shè)置他們的樣式。下面是設(shè)置樣式部分
注意點(diǎn):頂部是固定不動的,所以要用到position: fixed;屬性,在測試的過程中發(fā)現(xiàn)scrollView滾動到一定的位置后頂部的控件會變成透明,原因是頂部控件沒有設(shè)置具體的高度,所以height: 40px;這個屬性不能省略,還有一個現(xiàn)象就是scrollView會蓋住頂部的控件,所以設(shè)置了z-index: 9999;這個屬性,讓頂部控件始終展示在最前面。
cell的樣式都是很基本的思路,還有網(wǎng)絡(luò)請求部分的demo具體請看源碼, 源碼地址:http://git.oschina.net/darrenchen/xiaochengxu_leilema 源碼下載:darrenchen-xiaochengxu_leilema-master.zip
工作日 8:30-12:00 14:30-18:00
周六及部分節(jié)假日提供值班服務(wù)