微信小程序-仿果庫列表

這個(gè)篇文章帶大家一起練練微信小程序布局恐疲。
下面將會(huì)按照以下的順序介紹:
布局的實(shí)現(xiàn)
邏輯的實(shí)現(xiàn)
樣式的實(shí)現(xiàn)

1.布局的實(shí)現(xiàn)

<!--最外層-->

<view class="home-view1">

 <!--圖片層-->

 <view class="home-view2">

 <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"></image>

 </view>

 <!--描述層-->

 <text class="home-text1">小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物</text>

 <!--信息層-->

 <view class="home-view3"> 

 <view class="home-view4" >

 <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png"></image>

 <text class="home-text-heart bgColor" > 22</text>

 </view>

 <text class="home-text-time" >2016.10.29</text>

 </view>

 <!--分界線line-->

 <view class="home-view-line"></view>

 <!--圖片層(下面的代碼直接復(fù)制了上面的所有布局代碼)-->

 <view class="home-view2">

 <image class="home-image1" src="http://qty83k.creatby.com/materials/origin/640e31829b8776967dedc670b5427d0f_origin.jpg"></image>

 </view>

 <!--描述層-->

 <text class="home-text1">小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物小巧可愛的案頭雅物</text>

 <!--信息層-->

 <view class="home-view3"> 

 <view class="home-view4" >

 <image class="home-image-heart" src="http://qty83k.creatby.com/materials/origin/c5656ef00d38d89eae437c5a9102f8fa_origin.png"></image>

 <text class="home-text-heart bgColor" > 22</text>

 </view>

 <text class="home-text-time" >2016.10.29</text>

 </view>

 <!--分界線line-->

 <view class="home-view-line"></view>

</view>

2.邏輯的實(shí)現(xiàn)
只是注冊(cè)了Page界面

Page({

 data:{

 }

})

3.樣式的實(shí)現(xiàn)
.home-view1樣式:display規(guī)定最大View布局為彈性布局,justify-content規(guī)定內(nèi)容居中族扰,豎直排列, …
.home-view3樣式:display規(guī)定了信息欄布局為彈性布局,justify-content規(guī)定內(nèi)容水平平均分配
.home-view4樣式:display規(guī)定了收藏圖片和收藏?cái)?shù)的父布局為彈性布局,align-items規(guī)定內(nèi)容在豎直方向居中
.home-image1樣式:規(guī)定圖片的高度
.home-image-heart樣式:規(guī)定收藏圖片的大小
.home-text1樣式:規(guī)定描述文字的樣式,text-align規(guī)定文字居中鄙陡,line-height規(guī)定兩行文字之間的高度
.home-text-heart樣式:規(guī)定收藏?cái)?shù)的樣式,border-radius規(guī)定邊界圓角
.home-view-line樣式:是一條分界線
.bgColor樣式:規(guī)定收藏?cái)?shù)的背景

.home-view1{

 display: flex;

 justify-content: center;

 flex-direction: column;

 height: 100%;

 width: 100%;

 margin: 6px;

}

.home-view3{

 display: flex;

 justify-content: space-between;

}

.home-view4{

 display: flex;

 align-items: center;

}

.home-image1{

 height: 200px;

}

.home-image-heart{

 width: 30px;

 height: 30px;

}

.home-text1{

 text-align: left;

 line-height: 25px;

 margin-top: 6px;

 margin-right: 6px;

 color: gray;

}

.home-text-heart{

 width: 22px;

 height: 22px;

 margin-left: 10px;

 border-radius: 20%;

 pad: 5px;

 text-align: center;

}

.home-text-time{

 text-align: center;

 margin-right: 20px;

 padding-top: 5px;

 color: gray;

}

.home-view-line{

 width: 100%;

 height: 6px;

 margin-top: 5px;

 background-color: gainsboro;

}

.bgColor{

 background-color: lightblue;

 opacity: 0.6;

}

4.效果圖


來源:http://bbs.520it.com/forum.php?mod=viewthread&tid=2871

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末躏啰,一起剝皮案震驚了整個(gè)濱河市趁矾,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌给僵,老刑警劉巖毫捣,帶你破解...
    沈念sama閱讀 211,817評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異帝际,居然都是意外死亡培漏,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,329評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門胡本,熙熙樓的掌柜王于貴愁眉苦臉地迎上來牌柄,“玉大人,你說我怎么就攤上這事侧甫∩河叮” “怎么了?”我有些...
    開封第一講書人閱讀 157,354評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵披粟,是天一觀的道長(zhǎng)咒锻。 經(jīng)常有香客問我,道長(zhǎng)守屉,這世上最難降的妖魔是什么惑艇? 我笑而不...
    開封第一講書人閱讀 56,498評(píng)論 1 284
  • 正文 為了忘掉前任,我火速辦了婚禮拇泛,結(jié)果婚禮上滨巴,老公的妹妹穿的比我還像新娘。我一直安慰自己俺叭,他們只是感情好恭取,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,600評(píng)論 6 386
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著熄守,像睡著了一般蜈垮。 火紅的嫁衣襯著肌膚如雪耗跛。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,829評(píng)論 1 290
  • 那天攒发,我揣著相機(jī)與錄音调塌,去河邊找鬼。 笑死惠猿,一個(gè)胖子當(dāng)著我的面吹牛烟阐,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播紊扬,決...
    沈念sama閱讀 38,979評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼唉擂!你這毒婦竟也來了餐屎?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,722評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤玩祟,失蹤者是張志新(化名)和其女友劉穎腹缩,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體空扎,經(jīng)...
    沈念sama閱讀 44,189評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡藏鹊,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,519評(píng)論 2 327
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了转锈。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片盘寡。...
    茶點(diǎn)故事閱讀 38,654評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖撮慨,靈堂內(nèi)的尸體忽然破棺而出竿痰,到底是詐尸還是另有隱情,我是刑警寧澤砌溺,帶...
    沈念sama閱讀 34,329評(píng)論 4 330
  • 正文 年R本政府宣布影涉,位于F島的核電站,受9級(jí)特大地震影響规伐,放射性物質(zhì)發(fā)生泄漏蟹倾。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,940評(píng)論 3 313
  • 文/蒙蒙 一猖闪、第九天 我趴在偏房一處隱蔽的房頂上張望鲜棠。 院中可真熱鬧,春花似錦培慌、人聲如沸岔留。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,762評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽献联。三九已至竖配,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間里逆,已是汗流浹背进胯。 一陣腳步聲響...
    開封第一講書人閱讀 31,993評(píng)論 1 266
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留原押,地道東北人胁镐。 一個(gè)月前我還...
    沈念sama閱讀 46,382評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像诸衔,于是被迫代替她去往敵國(guó)和親盯漂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,543評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案笨农? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,737評(píng)論 1 92
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 171,790評(píng)論 25 707
  • 移動(dòng)開發(fā)基本知識(shí)點(diǎn) 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,460評(píng)論 0 6
  • 昨天學(xué)習(xí)了雙贏思維谒亦,那么雙贏思維的前提就是理解別人竭宰,而理解別人的前提,是傾聽份招。但很多時(shí)候我們并不是真的懂傾聽切揭,因?yàn)?..
    LoveYoga喵喵閱讀 1,886評(píng)論 1 2
  • 人生,最忌諱沒有目標(biāo)锁摔,盲從廓旬,不知道做什么。 那么谐腰,目前就給自己定下目標(biāo)吧: 1 工作地點(diǎn):蘇州嗤谚。 2 職業(yè)規(guī)劃: ...
    兔子乖乖閱讀 194評(píng)論 0 1