微信小程序 - 仿果库列表

这个篇文章带大家一起练练微信小程序布局。

下面将会按照以下的顺序介绍：

1. 布局的实现
2. 逻辑的实现
3. 样式的实现

1.布局的实现

最大的布局是view， view布局中包含了：一张图片，文字描述，信息栏和分界线

<!--最外层-->
<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>