小程序开发DEMO实例

小程序开发DEMO实例
微信小程序 布局实例： 下面将会按照以下的顺序介绍： 布局的实现 逻辑的实现 样式的实现

微信小程序 布局实例：

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

布局的实现逻辑的实现样式的实现

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> </view> <text class="home-text-time" >2016.10.29</text> </view> <!--分界线line--> <view class="home-view-line"></view> <!--图片层(下面的代码直接复制了上面的所有布局代码)--> <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>