DDR爱好者之家

微信小程序 简单DEMO布局，逻辑，样式的练习
站长资源 2025/10/25 佚名
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收录资讯

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。

据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。

更新日志

友情链接

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