微信小程序 简单DEMO布局,逻辑,样式的练习
微信小程序 布局实例:下面将会按照以下的顺序介绍:
最大的布局是view, view布局中包含了:一张图片,文字描述,信息栏和分界线 <text class="home-text1">小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物 <view class="home-view3">
<view class="home-view-line"> <view class="home-view2"> <text class="home-text1">小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物小巧可爱的案头雅物 <view class="home-view3">
<view class="home-view-line"> 2.逻辑的实现只是注册了Page界面 data:{
} }) 3.样式的实现.home-view1样式:display规定最大View布局为弹性布局,justify-content规定内容居中,竖直排列,… .home-view3样式:display规定了信息栏布局为弹性布局,justify-content规定内容水平平均分配 .home-view4样式:display规定了收藏图片和收藏数的父布局为弹性布局,align-items规定内容在竖直方向居中 .home-image1样式:规定图片的高度 .home-image-heart样式:规定收藏图片的大小 .home-text1样式:规定描述文字的样式,text-align规定文字居中,line-height规定两行文字之间的高度 .home-text-heart样式:规定收藏数的样式,border-radius规定边界圆角 .home-view-line样式:是一条分界线 .bgColor样式:规定收藏数的背景 height: 100%;
width: 100%; margin: 6px; } .home-view3{ .home-view4{ .home-image1{ .home-image-heart{ .home-text1{ .home-text-heart{ .home-text-time{ .home-view-line{ width: 100%; .bgColor{ 4.效果图感谢阅读,希望能帮助到大家,谢谢大家对本站的支持! (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |