DDR爱好者之家

微信小程序 简单DEMO布局，逻辑，样式的练习
站长资源 2024/11/28 佚名
49 1538
DDR爱好者之家 Design By 杰米

微信小程序 布局实例：

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

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

1.布局的实现

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

<!--最外层-->
<view class="home-view1">
  <!--图片层-->
  <view class="home-view2">
    <image class="home-image1" src="/UploadFiles/2021-04-02/640e31829b8776967dedc670b5427d0f_origin.jpg">


2.逻辑的实现


只是注册了Page界面





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样式：规定收藏数的背景





.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.效果图


微信小程序 简单DEMO布局，逻辑，样式的练习


感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站 透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码 爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？

根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米